<!DOCTYPE html>
<html lang=zh>
<head>
  <meta charset="utf-8">
  
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no, minimal-ui">
  <meta name="renderer" content="webkit">
  <meta http-equiv="Cache-Control" content="no-transform" />
  <meta http-equiv="Cache-Control" content="no-siteapp" />
  <meta name="apple-mobile-web-app-capable" content="yes">
  <meta name="apple-mobile-web-app-status-bar-style" content="black">
  <meta name="format-detection" content="telephone=no,email=no,adress=no">
  <!-- Color theme for statusbar -->
  <meta name="theme-color" content="#000000" />
  <!-- 强制页面在当前窗口以独立页面显示,防止别人在框架里调用页面 -->
  <meta http-equiv="window-target" content="_top" />
  
  
  <title>vue笔记 | 逸辰</title>
  <meta name="description" content="Vue实战1、Vue 引言 渐进式 JavaScript 框架   –摘自官网  123456789101112131415161718192021# 渐进式   1. 易用  html css javascript   2. 高效  开发前端页面 非常高效    3. 灵活  开发灵活 多样性# 总结		Vue 是一个javascript 框架 js 简化页面js操作		bootstrap 是一">
<meta property="og:type" content="article">
<meta property="og:title" content="vue笔记">
<meta property="og:url" content="https://yichenfirst.github.io/2021/07/30/%E5%89%8D%E7%AB%AF/vue%E7%AC%94%E8%AE%B0/index.html">
<meta property="og:site_name" content="逸辰">
<meta property="og:description" content="Vue实战1、Vue 引言 渐进式 JavaScript 框架   –摘自官网  123456789101112131415161718192021# 渐进式   1. 易用  html css javascript   2. 高效  开发前端页面 非常高效    3. 灵活  开发灵活 多样性# 总结		Vue 是一个javascript 框架 js 简化页面js操作		bootstrap 是一">
<meta property="og:locale" content="zh_CN">
<meta property="og:image" content="https://yichen-blog.oss-cn-beijing.aliyuncs.com//note-image/2023/07/16/20230716-134834.png">
<meta property="og:image" content="https://yichen-blog.oss-cn-beijing.aliyuncs.com//note-image/2023/07/16/20230716-135141.png">
<meta property="og:image" content="https://yichen-blog.oss-cn-beijing.aliyuncs.com//note-image/2023/07/16/20230716-135205.png">
<meta property="og:image" content="https://yichen-blog.oss-cn-beijing.aliyuncs.com//note-image/2023/07/16/20230716-135232.png">
<meta property="article:published_time" content="2021-07-29T16:00:00.000Z">
<meta property="article:modified_time" content="2023-07-17T13:41:27.814Z">
<meta property="article:author" content="逸辰">
<meta property="article:tag" content="vue">
<meta name="twitter:card" content="summary">
<meta name="twitter:image" content="https://yichen-blog.oss-cn-beijing.aliyuncs.com//note-image/2023/07/16/20230716-134834.png">
  <!-- Canonical links -->
  <link rel="canonical" href="https://yichenfirst.github.io/2021/07/30/%E5%89%8D%E7%AB%AF/vue%E7%AC%94%E8%AE%B0/index.html">
  
    <link rel="alternate" href="/atom.xml" title="逸辰" type="application/atom+xml">
  
  
    <link rel="icon" href="/favicon.png" type="image/x-icon">
  
  
<link rel="stylesheet" href="/css/style.css">

  
  
  
  
<meta name="generator" content="Hexo 6.3.0">
<style>.github-emoji { position: relative; display: inline-block; width: 1.2em; min-height: 1.2em; overflow: hidden; vertical-align: top; color: transparent; }  .github-emoji > span { position: relative; z-index: 10; }  .github-emoji img, .github-emoji .fancybox { margin: 0 !important; padding: 0 !important; border: none !important; outline: none !important; text-decoration: none !important; user-select: none !important; cursor: auto !important; }  .github-emoji img { height: 1.2em !important; width: 1.2em !important; position: absolute !important; left: 50% !important; top: 50% !important; transform: translate(-50%, -50%) !important; user-select: none !important; cursor: auto !important; } .github-emoji-fallback { color: inherit; } .github-emoji-fallback img { opacity: 0 !important; }</style>
</head>


<body class="main-center" itemscope itemtype="http://schema.org/WebPage">
  <header class="header" itemscope itemtype="http://schema.org/WPHeader">
  <div class="slimContent">
    <div class="navbar-header">
      
      
      <div class="profile-block text-center">
        <a id="avatar" href="" target="_blank">
          <img class="img-circle img-rotate" src="/images/avatar.jpg" width="200" height="200">
        </a>
        <h2 id="name" class="hidden-xs hidden-sm">逸辰</h2>
        <h3 id="title" class="hidden-xs hidden-sm hidden-md">后端开发</h3>
        <small id="location" class="text-muted hidden-xs hidden-sm"><i class="icon icon-map-marker"></i> 长春，中国</small>
      </div>
      
      <div class="search" id="search-form-wrap">

    <form class="search-form sidebar-form">
        <div class="input-group">
            <input type="text" class="search-form-input form-control" placeholder="搜索" />
            <span class="input-group-btn">
                <button type="submit" class="search-form-submit btn btn-flat" onclick="return false;"><i class="icon icon-search"></i></button>
            </span>
        </div>
    </form>
    <div class="ins-search">
  <div class="ins-search-mask"></div>
  <div class="ins-search-container">
    <div class="ins-input-wrapper">
      <input type="text" class="ins-search-input" placeholder="想要查找什么..." x-webkit-speech />
      <button type="button" class="close ins-close ins-selectable" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
    </div>
    <div class="ins-section-wrapper">
      <div class="ins-section-container"></div>
    </div>
  </div>
</div>


</div>
      <button class="navbar-toggle collapsed" type="button" data-toggle="collapse" data-target="#main-navbar" aria-controls="main-navbar" aria-expanded="false">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
    </div>
    <nav id="main-navbar" class="collapse navbar-collapse" itemscope itemtype="http://schema.org/SiteNavigationElement" role="navigation">
      <ul class="nav navbar-nav main-nav ">
        
        
        <li class="menu-item menu-item-home">
          <a href="/.">
            
            <i class="icon icon-home-fill"></i>
            
            <span class="menu-title">首页</span>
          </a>
        </li>
        
        
        <li class="menu-item menu-item-archives">
          <a href="/archives">
            
            <i class="icon icon-archives-fill"></i>
            
            <span class="menu-title">归档</span>
          </a>
        </li>
        
        
        <li class="menu-item menu-item-categories">
          <a href="/categories">
            
            <i class="icon icon-folder"></i>
            
            <span class="menu-title">分类</span>
          </a>
        </li>
        
        
        <li class="menu-item menu-item-tags">
          <a href="/tags">
            
            <i class="icon icon-tags"></i>
            
            <span class="menu-title">标签</span>
          </a>
        </li>
        
        
        <li class="menu-item menu-item-about">
          <a href="/about">
            
            <i class="icon icon-cup-fill"></i>
            
            <span class="menu-title">关于</span>
          </a>
        </li>
        
      </ul>
      
    </nav>
  </div>
</header>

  
    <aside class="sidebar" itemscope itemtype="http://schema.org/WPSideBar">
  <div class="slimContent">
    
      <div class="widget">
    <h3 class="widget-title">公告</h3>
    <div class="widget-body">
        <div id="board">
            <div class="content">
                <p>欢迎交流与分享经验!</p>
            </div>
        </div>
    </div>
</div>

    
      
  <div class="widget">
    <h3 class="widget-title">分类</h3>
    <div class="widget-body">
      <ul class="category-list"><li class="category-list-item"><a class="category-list-link" href="/categories/ElasticSearch/">ElasticSearch</a><span class="category-list-count">1</span></li><li class="category-list-item"><a class="category-list-link" href="/categories/docker/">docker</a><span class="category-list-count">1</span></li><li class="category-list-item"><a class="category-list-link" href="/categories/go/">go</a><span class="category-list-count">1</span></li><li class="category-list-item"><a class="category-list-link" href="/categories/java/">java</a><span class="category-list-count">6</span></li><li class="category-list-item"><a class="category-list-link" href="/categories/mybatis/">mybatis</a><span class="category-list-count">1</span></li><li class="category-list-item"><a class="category-list-link" href="/categories/mysql/">mysql</a><span class="category-list-count">3</span></li><li class="category-list-item"><a class="category-list-link" href="/categories/redis/">redis</a><span class="category-list-count">6</span></li><li class="category-list-item"><a class="category-list-link" href="/categories/spring/">spring</a><span class="category-list-count">9</span></li><li class="category-list-item"><a class="category-list-link" href="/categories/vue/">vue</a><span class="category-list-count">3</span></li><li class="category-list-item"><a class="category-list-link" href="/categories/%E5%88%86%E5%B8%83%E5%BC%8F/">分布式</a><span class="category-list-count">1</span></li><li class="category-list-item"><a class="category-list-link" href="/categories/%E6%93%8D%E4%BD%9C%E7%B3%BB%E7%BB%9F/">操作系统</a><span class="category-list-count">3</span></li><li class="category-list-item"><a class="category-list-link" href="/categories/%E8%AE%A1%E7%AE%97%E6%9C%BA%E7%BD%91%E7%BB%9C/">计算机网络</a><span class="category-list-count">1</span></li><li class="category-list-item"><a class="category-list-link" href="/categories/%E9%9D%A2%E8%AF%95/">面试</a><span class="category-list-count">3</span></li></ul>
    </div>
  </div>


    
      
  <div class="widget">
    <h3 class="widget-title">标签</h3>
    <div class="widget-body">
      <ul class="tag-list" itemprop="keywords"><li class="tag-list-item"><a class="tag-list-link" href="/tags/ElasticSearch/" rel="tag">ElasticSearch</a><span class="tag-list-count">1</span></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/aop/" rel="tag">aop</a><span class="tag-list-count">1</span></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/docker/" rel="tag">docker</a><span class="tag-list-count">1</span></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/go/" rel="tag">go</a><span class="tag-list-count">1</span></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/java/" rel="tag">java</a><span class="tag-list-count">7</span></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/javascript/" rel="tag">javascript</a><span class="tag-list-count">1</span></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/mybatis/" rel="tag">mybatis</a><span class="tag-list-count">1</span></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/mysql/" rel="tag">mysql</a><span class="tag-list-count">5</span></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/redis/" rel="tag">redis</a><span class="tag-list-count">6</span></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/spring/" rel="tag">spring</a><span class="tag-list-count">9</span></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/springcloud/" rel="tag">springcloud</a><span class="tag-list-count">1</span></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/springsecurity/" rel="tag">springsecurity</a><span class="tag-list-count">1</span></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/tcp/" rel="tag">tcp</a><span class="tag-list-count">1</span></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/token/" rel="tag">token</a><span class="tag-list-count">1</span></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/vue/" rel="tag">vue</a><span class="tag-list-count">4</span></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/%E6%80%BB%E7%BB%93/" rel="tag">总结</a><span class="tag-list-count">2</span></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/%E6%93%8D%E4%BD%9C%E7%B3%BB%E7%BB%9F/" rel="tag">操作系统</a><span class="tag-list-count">3</span></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/%E9%9D%A2%E8%AF%95/" rel="tag">面试</a><span class="tag-list-count">1</span></li></ul>
    </div>
  </div>


    
      
  <div class="widget">
    <h3 class="widget-title">标签云</h3>
    <div class="widget-body tagcloud">
      <a href="/tags/ElasticSearch/" style="font-size: 13px;">ElasticSearch</a> <a href="/tags/aop/" style="font-size: 13px;">aop</a> <a href="/tags/docker/" style="font-size: 13px;">docker</a> <a href="/tags/go/" style="font-size: 13px;">go</a> <a href="/tags/java/" style="font-size: 13.86px;">java</a> <a href="/tags/javascript/" style="font-size: 13px;">javascript</a> <a href="/tags/mybatis/" style="font-size: 13px;">mybatis</a> <a href="/tags/mysql/" style="font-size: 13.57px;">mysql</a> <a href="/tags/redis/" style="font-size: 13.71px;">redis</a> <a href="/tags/spring/" style="font-size: 14px;">spring</a> <a href="/tags/springcloud/" style="font-size: 13px;">springcloud</a> <a href="/tags/springsecurity/" style="font-size: 13px;">springsecurity</a> <a href="/tags/tcp/" style="font-size: 13px;">tcp</a> <a href="/tags/token/" style="font-size: 13px;">token</a> <a href="/tags/vue/" style="font-size: 13.43px;">vue</a> <a href="/tags/%E6%80%BB%E7%BB%93/" style="font-size: 13.14px;">总结</a> <a href="/tags/%E6%93%8D%E4%BD%9C%E7%B3%BB%E7%BB%9F/" style="font-size: 13.29px;">操作系统</a> <a href="/tags/%E9%9D%A2%E8%AF%95/" style="font-size: 13px;">面试</a>
    </div>
  </div>

    
      
  <div class="widget">
    <h3 class="widget-title">归档</h3>
    <div class="widget-body">
      <ul class="archive-list"><li class="archive-list-item"><a class="archive-list-link" href="/archives/2023/09/">九月 2023</a><span class="archive-list-count">1</span></li><li class="archive-list-item"><a class="archive-list-link" href="/archives/2023/07/">七月 2023</a><span class="archive-list-count">1</span></li><li class="archive-list-item"><a class="archive-list-link" href="/archives/2023/05/">五月 2023</a><span class="archive-list-count">2</span></li><li class="archive-list-item"><a class="archive-list-link" href="/archives/2023/04/">四月 2023</a><span class="archive-list-count">2</span></li><li class="archive-list-item"><a class="archive-list-link" href="/archives/2023/03/">三月 2023</a><span class="archive-list-count">5</span></li><li class="archive-list-item"><a class="archive-list-link" href="/archives/2023/02/">二月 2023</a><span class="archive-list-count">1</span></li><li class="archive-list-item"><a class="archive-list-link" href="/archives/2023/01/">一月 2023</a><span class="archive-list-count">2</span></li><li class="archive-list-item"><a class="archive-list-link" href="/archives/2022/12/">十二月 2022</a><span class="archive-list-count">2</span></li><li class="archive-list-item"><a class="archive-list-link" href="/archives/2022/11/">十一月 2022</a><span class="archive-list-count">4</span></li><li class="archive-list-item"><a class="archive-list-link" href="/archives/2022/10/">十月 2022</a><span class="archive-list-count">1</span></li><li class="archive-list-item"><a class="archive-list-link" href="/archives/2022/09/">九月 2022</a><span class="archive-list-count">2</span></li><li class="archive-list-item"><a class="archive-list-link" href="/archives/2022/08/">八月 2022</a><span class="archive-list-count">2</span></li><li class="archive-list-item"><a class="archive-list-link" href="/archives/2022/06/">六月 2022</a><span class="archive-list-count">1</span></li><li class="archive-list-item"><a class="archive-list-link" href="/archives/2022/04/">四月 2022</a><span class="archive-list-count">1</span></li><li class="archive-list-item"><a class="archive-list-link" href="/archives/2022/02/">二月 2022</a><span class="archive-list-count">2</span></li><li class="archive-list-item"><a class="archive-list-link" href="/archives/2022/01/">一月 2022</a><span class="archive-list-count">2</span></li><li class="archive-list-item"><a class="archive-list-link" href="/archives/2021/10/">十月 2021</a><span class="archive-list-count">1</span></li><li class="archive-list-item"><a class="archive-list-link" href="/archives/2021/09/">九月 2021</a><span class="archive-list-count">3</span></li><li class="archive-list-item"><a class="archive-list-link" href="/archives/2021/08/">八月 2021</a><span class="archive-list-count">3</span></li><li class="archive-list-item"><a class="archive-list-link" href="/archives/2021/07/">七月 2021</a><span class="archive-list-count">1</span></li><li class="archive-list-item"><a class="archive-list-link" href="/archives/2021/06/">六月 2021</a><span class="archive-list-count">1</span></li><li class="archive-list-item"><a class="archive-list-link" href="/archives/2021/03/">三月 2021</a><span class="archive-list-count">2</span></li></ul>
    </div>
  </div>


    
      
  <div class="widget">
    <h3 class="widget-title">最新文章</h3>
    <div class="widget-body">
      <ul class="recent-post-list list-unstyled no-thumbnail">
        
          <li>
            
            <div class="item-inner">
              <p class="item-category">
                <a class="category-link" href="/categories/%E5%88%86%E5%B8%83%E5%BC%8F/">分布式</a>
              </p>
              <p class="item-title">
                <a href="/2023/09/01/%E5%88%86%E5%B8%83%E5%BC%8F/%E5%88%86%E5%B8%83%E5%BC%8F%E4%BA%8B%E5%8A%A1/" class="title">分布式事务</a>
              </p>
              <p class="item-date">
                <time datetime="2023-09-01T08:53:49.259Z" itemprop="datePublished">2023-09-01</time>
              </p>
            </div>
          </li>
          
          <li>
            
            <div class="item-inner">
              <p class="item-category">
                <a class="category-link" href="/categories/java/">java</a>
              </p>
              <p class="item-title">
                <a href="/2023/07/28/java/Java%E7%BA%BF%E7%A8%8B%E6%A8%A1%E5%9E%8B/" class="title">Java线程模型</a>
              </p>
              <p class="item-date">
                <time datetime="2023-07-28T13:59:18.661Z" itemprop="datePublished">2023-07-28</time>
              </p>
            </div>
          </li>
          
          <li>
            
            <div class="item-inner">
              <p class="item-category">
                <a class="category-link" href="/categories/java/">java</a>
              </p>
              <p class="item-title">
                <a href="/2023/05/19/java/AQS/" class="title">AQS详解</a>
              </p>
              <p class="item-date">
                <time datetime="2023-05-18T16:00:00.000Z" itemprop="datePublished">2023-05-19</time>
              </p>
            </div>
          </li>
          
          <li>
            
            <div class="item-inner">
              <p class="item-category">
                <a class="category-link" href="/categories/go/">go</a>
              </p>
              <p class="item-title">
                <a href="/2023/05/03/go/new%E4%B8%8Emake%E5%85%B3%E9%94%AE%E5%AD%97%E7%9A%84%E5%8C%BA%E5%88%AB/" class="title">new与make关键字的区别</a>
              </p>
              <p class="item-date">
                <time datetime="2023-05-02T16:00:00.000Z" itemprop="datePublished">2023-05-03</time>
              </p>
            </div>
          </li>
          
          <li>
            
            <div class="item-inner">
              <p class="item-category">
                <a class="category-link" href="/categories/java/">java</a>
              </p>
              <p class="item-title">
                <a href="/2023/04/15/java/CAS/" class="title">CAS</a>
              </p>
              <p class="item-date">
                <time datetime="2023-04-14T16:00:00.000Z" itemprop="datePublished">2023-04-15</time>
              </p>
            </div>
          </li>
          
      </ul>
    </div>
  </div>
  

    
  </div>
</aside>

  
  
<main class="main" role="main">
  <div class="content">
  <article id="post-前端/vue笔记" class="article article-type-post" itemscope itemtype="http://schema.org/BlogPosting">
    
    <div class="article-header">
      
        
  
    <h1 class="article-title" itemprop="name">
      vue笔记
    </h1>
  

      
      <div class="article-meta">
        <span class="article-date">
    <i class="icon icon-calendar-check"></i>
	<a href="/2021/07/30/%E5%89%8D%E7%AB%AF/vue%E7%AC%94%E8%AE%B0/" class="article-date">
	  <time datetime="2021-07-29T16:00:00.000Z" itemprop="datePublished">2021-07-30</time>
	</a>
</span>
        
  <span class="article-category">
    <i class="icon icon-folder"></i>
    <a class="article-category-link" href="/categories/vue/">vue</a>
  </span>

        
  <span class="article-tag">
    <i class="icon icon-tags"></i>
	<a class="article-tag-link-link" href="/tags/vue/" rel="tag">vue</a>
  </span>


        
	<span class="article-read hidden-xs">
	    <i class="icon icon-eye-fill" aria-hidden="true"></i>
	    <span id="busuanzi_container_page_pv">
			<span id="busuanzi_value_page_pv">0</span>
		</span>
	</span>


        <span class="post-comment"><i class="icon icon-comment"></i> <a href="/2021/07/30/%E5%89%8D%E7%AB%AF/vue%E7%AC%94%E8%AE%B0/#comments" class="article-comment-link">评论</a></span>
        
	
		<span class="post-wordcount hidden-xs" itemprop="wordCount">字数统计: 10.4k(字)</span>
	
	
		<span class="post-readcount hidden-xs" itemprop="timeRequired">阅读时长: 48(分)</span>
	

      </div>
    </div>
    <div class="article-entry marked-body" itemprop="articleBody">
      
        <h1 id="Vue实战"><a href="#Vue实战" class="headerlink" title="Vue实战"></a>Vue实战</h1><h2 id="1、Vue-引言"><a href="#1、Vue-引言" class="headerlink" title="1、Vue 引言"></a>1、Vue 引言</h2><blockquote>
<p><code>渐进式</code> JavaScript 框架   –摘自官网</p>
</blockquote>
<figure class="highlight markdown"><table><tbody><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br></pre></td><td class="code"><pre><span class="line"><span class="section"># 渐进式</span></span><br><span class="line"><span class="bullet">   1.</span> 易用  html css javascript</span><br><span class="line"><span class="bullet">   2.</span> 高效  开发前端页面 非常高效 </span><br><span class="line"><span class="bullet">   3.</span> 灵活  开发灵活 多样性</span><br><span class="line"></span><br><span class="line"><span class="section"># 总结</span></span><br><span class="line"><span class="code">		Vue 是一个javascript 框架 js 简化页面js操作</span></span><br><span class="line"><span class="code">		bootstrap 是一个css框架  封装css</span></span><br><span class="line"><span class="code"></span></span><br><span class="line"><span class="section"># 后端服务端开发人员: </span></span><br><span class="line"><span class="code">		页面标签 dom jquery js document.getElementById("xxx")</span></span><br><span class="line"><span class="code">		Vue 渐进式javascript框架: 让我们通过操作很少的DOM,甚至不需要操作页面中任何DOM元素,就很容易的完成数据和视图绑定 ====&gt; 双向绑定 MVVM  </span></span><br><span class="line"><span class="code">		</span></span><br><span class="line"><span class="code">		注意：日后在使用vue过程中页面不要再引入Jquery框架</span></span><br><span class="line"><span class="code">		</span></span><br><span class="line"><span class="code">		html css---&gt;javascript(document.getElementById()...) ----&gt;jquery($("#xx")) ---&gt; angularjs ---&gt;vue(前后端分离架构核心)</span></span><br><span class="line"><span class="code">		</span></span><br><span class="line"><span class="code">		vue 前端系统   &lt;-----JSON-----&gt;  后台系统springcloud</span></span><br><span class="line"><span class="code"></span></span><br><span class="line"><span class="section"># Vue 作者</span></span><br><span class="line"> 	尤雨溪   国内的    </span><br></pre></td></tr></tbody></table></figure>

<h2 id="2、Vue入门"><a href="#2、Vue入门" class="headerlink" title="2、Vue入门"></a>2、Vue入门</h2><h3 id="2-1、下载Vuejs"><a href="#2-1、下载Vuejs" class="headerlink" title="2.1、下载Vuejs"></a>2.1、下载Vuejs</h3><figure class="highlight js"><table><tbody><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">//开发版本:</span></span><br><span class="line">	&lt;!-- 开发环境版本，包含了有帮助的命令行警告 --&gt;</span><br><span class="line">	<span class="language-xml"><span class="tag">&lt;<span class="name">script</span> <span class="attr">src</span>=<span class="string">"https://cdn.jsdelivr.net/npm/vue/dist/vue.js"</span>&gt;</span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span></span><br><span class="line"></span><br><span class="line"><span class="comment">//生产版本:</span></span><br><span class="line">	&lt;!-- 生产环境版本，优化了尺寸和速度 --&gt;</span><br><span class="line">	<span class="language-xml"><span class="tag">&lt;<span class="name">script</span> <span class="attr">src</span>=<span class="string">"https://cdn.jsdelivr.net/npm/vue"</span>&gt;</span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span></span><br></pre></td></tr></tbody></table></figure>

<h3 id="2-2、Vue第一个入门应用"><a href="#2-2、Vue第一个入门应用" class="headerlink" title="2.2、Vue第一个入门应用"></a>2.2、Vue第一个入门应用</h3><p><strong>1、vue第一个入门应用</strong></p>
<figure class="highlight html"><table><tbody><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br></pre></td><td class="code"><pre><span class="line"><span class="meta">&lt;!DOCTYPE <span class="keyword">html</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">html</span> <span class="attr">lang</span>=<span class="string">"en"</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">head</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">meta</span> <span class="attr">charset</span>=<span class="string">"UTF-8"</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">title</span>&gt;</span>vue系列课程<span class="tag">&lt;/<span class="name">title</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">head</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">body</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">div</span> <span class="attr">id</span>=<span class="string">"app"</span>&gt;</span></span><br><span class="line">        {{msg}}</span><br><span class="line">        <span class="tag">&lt;<span class="name">h2</span>&gt;</span>{{msg}}<span class="tag">&lt;/<span class="name">h2</span>&gt;</span></span><br><span class="line">        <span class="tag">&lt;<span class="name">span</span>&gt;</span></span><br><span class="line">            <span class="tag">&lt;<span class="name">h2</span>&gt;</span>{{msg}}<span class="tag">&lt;/<span class="name">h2</span>&gt;</span></span><br><span class="line">            <span class="tag">&lt;<span class="name">span</span>&gt;</span></span><br><span class="line">                <span class="tag">&lt;<span class="name">span</span>&gt;</span>{{msg}}<span class="tag">&lt;/<span class="name">span</span>&gt;</span></span><br><span class="line">            <span class="tag">&lt;/<span class="name">span</span>&gt;</span></span><br><span class="line">        <span class="tag">&lt;/<span class="name">span</span>&gt;</span></span><br><span class="line">        <span class="tag">&lt;<span class="name">h3</span>&gt;</span>用户名：{{username}}<span class="tag">&lt;/<span class="name">h3</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">body</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">html</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">script</span> <span class="attr">src</span>=<span class="string">"js/vue.js"</span>&gt;</span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">script</span>&gt;</span><span class="language-javascript"></span></span><br><span class="line"><span class="language-javascript">    <span class="keyword">var</span> app= <span class="keyword">new</span> <span class="title class_">Vue</span>({</span></span><br><span class="line"><span class="language-javascript">        <span class="attr">el</span>:<span class="string">"#app"</span>,  <span class="comment">//element：元素 作用：用来指定vue实例作用范围  日后在el指定的作用范围内可以直接使用{{属性名}}获取data中的属性</span></span></span><br><span class="line"><span class="language-javascript">        <span class="attr">data</span>:{      <span class="comment">//data：数据    作用：用来给vue实例对象绑定一系列数据</span></span></span><br><span class="line"><span class="language-javascript">            <span class="attr">msg</span>: <span class="string">"Vue欢迎您！"</span>,</span></span><br><span class="line"><span class="language-javascript">            <span class="attr">username</span>: <span class="string">"小陈!!"</span>,</span></span><br><span class="line"><span class="language-javascript">        }</span></span><br><span class="line"><span class="language-javascript">    });</span></span><br><span class="line"><span class="language-javascript"></span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br></pre></td></tr></tbody></table></figure>

<p><strong>2、vue实例中定义对象，数组等相关数据</strong> </p>
<figure class="highlight plaintext"><table><tbody><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br></pre></td><td class="code"><pre><span class="line">&lt;!DOCTYPE html&gt;</span><br><span class="line">&lt;html lang="en"&gt;</span><br><span class="line">&lt;head&gt;</span><br><span class="line">    &lt;meta charset="UTF-8"&gt;</span><br><span class="line">    &lt;title&gt;vue系列课程&lt;/title&gt;</span><br><span class="line">&lt;/head&gt;</span><br><span class="line">&lt;body&gt;</span><br><span class="line">    &lt;div id="app"&gt;</span><br><span class="line">        &lt;h2&gt;{{msg}}&lt;/h2&gt;</span><br><span class="line">        &lt;h2&gt;{{age}}&lt;/h2&gt;</span><br><span class="line">        &lt;h2&gt;姓名：{{user.name}}   描述：{{user.des}}&lt;/h2&gt;</span><br><span class="line">        &lt;h2&gt;{{schools[0]}}-{{schools[1]}}-{{schools[2]}}-{{schools[3]}}&lt;/h2&gt;</span><br><span class="line">        &lt;h2&gt;姓名：{{users[0].name}}  年龄：{{users[0].age}}  生日：{{users[0].bir}}&lt;/h2&gt;</span><br><span class="line">        &lt;h2&gt;姓名：{{users[1].name}}  年龄：{{users[1].age}}  生日：{{users[1].bir}}&lt;/h2&gt;</span><br><span class="line">        &lt;h2&gt;姓名：{{users[2].name}}  年龄：{{users[2].age}}  生日：{{users[2].bir}}&lt;/h2&gt;</span><br><span class="line">    &lt;/div&gt;</span><br><span class="line">&lt;/body&gt;</span><br><span class="line">&lt;/html&gt;</span><br><span class="line">&lt;!--引入vue.js文件--&gt;</span><br><span class="line">&lt;script src="js/vue.js"&gt;&lt;/script&gt;</span><br><span class="line">&lt;script&gt;</span><br><span class="line">    var app = new Vue({</span><br><span class="line">       el:"#app",  //指定vue作用范围</span><br><span class="line">       data:{      //用来给vue实例绑定一系列数据</span><br><span class="line">           msg:"百知欢迎您!!!",</span><br><span class="line">           age:"23",</span><br><span class="line">           user:{name:"小陈",des:"他在百知,百知等你！！"}, //定义对象</span><br><span class="line">           schools:["河南校区","北京校区","天津校区","山西校区"], //定义一个数组</span><br><span class="line">           users:[</span><br><span class="line">               {name:"小王",age:23,bir:"2012-12-01"},</span><br><span class="line">               {name:"小李",age:24,bir:"2013-12-01"},</span><br><span class="line">               {name:"小赵",age:25,bir:"2014-12-01"},</span><br><span class="line">           ]</span><br><span class="line">       }</span><br><span class="line">    });</span><br><span class="line">&lt;/script&gt;</span><br></pre></td></tr></tbody></table></figure>

<p><strong>3、使用获取data数据时,使用表达式 运算符等相关操作</strong> </p>
<figure class="highlight plaintext"><table><tbody><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br></pre></td><td class="code"><pre><span class="line">&lt;!DOCTYPE html&gt;</span><br><span class="line">&lt;html lang="en"&gt;</span><br><span class="line">&lt;head&gt;</span><br><span class="line">    &lt;meta charset="UTF-8"&gt;</span><br><span class="line">    &lt;title&gt;vue系列课程&lt;/title&gt;</span><br><span class="line">&lt;/head&gt;</span><br><span class="line">&lt;body&gt;</span><br><span class="line">    &lt;div id="app"&gt;</span><br><span class="line">        &lt;h2&gt;{{msg}}&lt;/h2&gt;</span><br><span class="line">        &lt;!--{{属性名}}：使用这种方式获取数据时，可以进行相关的运算（算数，逻辑），调用获取值类型相关js方法--&gt;</span><br><span class="line">        &lt;h2&gt;{{msg + '您好'}}&lt;/h2&gt;</span><br><span class="line">        &lt;h2&gt;{{msg == 'hello vue'}}&lt;/h2&gt;</span><br><span class="line">        &lt;h2&gt;{{msg.toUpperCase()}}&lt;/h2&gt;</span><br><span class="line">        &lt;h2&gt;{{age + 1}}&lt;/h2&gt;</span><br><span class="line">        &lt;h2&gt;{{age == 23}}&lt;/h2&gt;</span><br><span class="line">    &lt;/div&gt;</span><br><span class="line">&lt;/body&gt;</span><br><span class="line">&lt;/html&gt;</span><br><span class="line">&lt;!--引入vue.js文件--&gt;</span><br><span class="line">&lt;script src="js/vue.js"&gt;&lt;/script&gt;</span><br><span class="line">&lt;script&gt;</span><br><span class="line">    var app = new Vue({</span><br><span class="line">       el:"#app",  //指定vue作用范围</span><br><span class="line">       data:{      //用来给vue实例绑定一系列数据</span><br><span class="line">            msg:"hello vue",</span><br><span class="line">            age:23,</span><br><span class="line">       }</span><br><span class="line">    });</span><br><span class="line">&lt;/script&gt;</span><br></pre></td></tr></tbody></table></figure>

<p><strong>4、使用vue时el属性指定</strong></p>
<figure class="highlight plaintext"><table><tbody><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br></pre></td><td class="code"><pre><span class="line">&lt;!DOCTYPE html&gt;</span><br><span class="line">&lt;html lang="en"&gt;</span><br><span class="line">&lt;head&gt;</span><br><span class="line">    &lt;meta charset="UTF-8"&gt;</span><br><span class="line">    &lt;title&gt;vue系列课程&lt;/title&gt;</span><br><span class="line">&lt;/head&gt;</span><br><span class="line">&lt;body &gt;</span><br><span class="line">    &lt;div id="app" class="aa"&gt;</span><br><span class="line">        &lt;h2&gt;{{msg}}&lt;/h2&gt;</span><br><span class="line"></span><br><span class="line">    &lt;/div&gt;</span><br><span class="line">&lt;/body&gt;</span><br><span class="line">&lt;/html&gt;</span><br><span class="line">&lt;!--引入vue.js文件--&gt;</span><br><span class="line">&lt;script src="js/vue.js"&gt;&lt;/script&gt;</span><br><span class="line">&lt;script&gt;</span><br><span class="line">    var app = new Vue({</span><br><span class="line">       el:"#app",  //指定vue作用范围</span><br><span class="line">                        // 书写格式：使用css选择器 id选择器 html选择器 类选择器 推荐使用id选择器 id选择器具有唯一性</span><br><span class="line">                        // 注意事项：不要将el指向body或html标签 Do not mount Vue to &lt;html&gt; or &lt;body&gt; - mount to normal elements instead.</span><br><span class="line">       data:{      //用来给vue实例绑定一系列数据</span><br><span class="line">            msg:"hello vue",</span><br><span class="line">       }</span><br><span class="line">    });</span><br><span class="line">&lt;/script&gt;</span><br></pre></td></tr></tbody></table></figure>

<p><strong>5、总结</strong> </p>
<figure class="highlight markdown"><table><tbody><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line"><span class="section"># 总结:</span></span><br><span class="line"><span class="code">			1.vue实例(对象)中el属性: 	代表Vue的作用范围  日后在Vue的作用范围内都可以使用Vue的语法</span></span><br><span class="line"><span class="code">			2.vue实例(对象)中data属性: 用来给Vue实例绑定一些相关数据, 绑定的数据可以通过{{变量名}}在Vue作用范围内取出</span></span><br><span class="line"><span class="code">			3.在使用{{}}进行获取data中数据时,可以在{{}}中书写表达式,运算符,调用相关方法,以及逻辑运算等</span></span><br><span class="line"><span class="code">			4.el属性中可以书写任意的CSS选择器[jquery选择器],但是在使用Vue开发是推荐使用 id选择器  注意: el属性值不能指定body或html标签</span></span><br></pre></td></tr></tbody></table></figure>

<hr>
<h2 id="3、v-text和v-html"><a href="#3、v-text和v-html" class="headerlink" title="3、v-text和v-html"></a>3、v-text和v-html</h2><h3 id="3-1、v-text"><a href="#3-1、v-text" class="headerlink" title="3.1、v-text"></a>3.1、v-text</h3><blockquote>
<p><code>v-text</code>:用来获取data中数据将数据以文本的形式渲染到指定标签内部             类似于javascript 中 innerText</p>
</blockquote>
<figure class="highlight html"><table><tbody><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">div</span> <span class="attr">id</span>=<span class="string">"app"</span> <span class="attr">class</span>=<span class="string">"aa"</span>&gt;</span></span><br><span class="line">       <span class="tag">&lt;<span class="name">span</span> &gt;</span>{{ message }}<span class="tag">&lt;/<span class="name">span</span>&gt;</span></span><br><span class="line">       <span class="tag">&lt;<span class="name">span</span> <span class="attr">v-text</span>=<span class="string">"message"</span>&gt;</span><span class="tag">&lt;/<span class="name">span</span>&gt;</span></span><br><span class="line">   <span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line"></span><br><span class="line">   <span class="comment">&lt;!--引入vue.js--&gt;</span></span><br><span class="line">   <span class="tag">&lt;<span class="name">script</span> <span class="attr">src</span>=<span class="string">"https://cdn.jsdelivr.net/npm/vue/dist/vue.js"</span>&gt;</span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br><span class="line">   <span class="tag">&lt;<span class="name">script</span>&gt;</span><span class="language-javascript"></span></span><br><span class="line"><span class="language-javascript">       <span class="keyword">const</span> app = <span class="keyword">new</span> <span class="title class_">Vue</span>({</span></span><br><span class="line"><span class="language-javascript">           <span class="attr">el</span>:<span class="string">"#app"</span>,</span></span><br><span class="line"><span class="language-javascript">           <span class="attr">data</span>:{</span></span><br><span class="line"><span class="language-javascript">               <span class="attr">message</span>:<span class="string">"百知欢迎您"</span></span></span><br><span class="line"><span class="language-javascript">           }</span></span><br><span class="line"><span class="language-javascript">       })</span></span><br><span class="line"><span class="language-javascript">   </span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br></pre></td></tr></tbody></table></figure>

<figure class="highlight markdown"><table><tbody><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line"><span class="section"># 总结</span></span><br><span class="line"><span class="code">				1.{{}}(插值表达式)和v-text获取数据的区别在于 </span></span><br><span class="line"><span class="code">				a.使用v-text取值会将标签中原有的数据覆盖 使用插值表达式的形式不会覆盖标签原有的数据</span></span><br><span class="line"><span class="code">				b.使用v-text可以避免在网络环境较差的情况下出现插值闪烁</span></span><br></pre></td></tr></tbody></table></figure>

<h3 id="3-2、v-html"><a href="#3-2、v-html" class="headerlink" title="3.2、v-html"></a>3.2、v-html</h3><blockquote>
<p><code>v-html</code>:用来获取data中数据将数据中含有的html标签先解析在渲染到指定标签的内部  类似于javascript中 innerHTML</p>
</blockquote>
<figure class="highlight html"><table><tbody><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">div</span> <span class="attr">id</span>=<span class="string">"app"</span> <span class="attr">class</span>=<span class="string">"aa"</span>&gt;</span></span><br><span class="line">       <span class="tag">&lt;<span class="name">span</span>&gt;</span>{{message}}<span class="tag">&lt;/<span class="name">span</span>&gt;</span></span><br><span class="line">       <span class="tag">&lt;<span class="name">br</span>&gt;</span></span><br><span class="line">       <span class="tag">&lt;<span class="name">span</span> <span class="attr">v-text</span>=<span class="string">"message"</span>&gt;</span><span class="tag">&lt;/<span class="name">span</span>&gt;</span></span><br><span class="line"></span><br><span class="line">       <span class="tag">&lt;<span class="name">br</span>&gt;</span></span><br><span class="line">       <span class="tag">&lt;<span class="name">span</span> <span class="attr">v-html</span>=<span class="string">"message"</span>&gt;</span>xxxxxx<span class="tag">&lt;/<span class="name">span</span>&gt;</span></span><br><span class="line">   <span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line"></span><br><span class="line">   <span class="comment">&lt;!--引入vue.js--&gt;</span></span><br><span class="line">   <span class="tag">&lt;<span class="name">script</span> <span class="attr">src</span>=<span class="string">"https://cdn.jsdelivr.net/npm/vue/dist/vue.js"</span>&gt;</span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br><span class="line">   <span class="tag">&lt;<span class="name">script</span>&gt;</span><span class="language-javascript"></span></span><br><span class="line"><span class="language-javascript">       <span class="keyword">const</span> app = <span class="keyword">new</span> <span class="title class_">Vue</span>({</span></span><br><span class="line"><span class="language-javascript">           <span class="attr">el</span>:<span class="string">"#app"</span>,</span></span><br><span class="line"><span class="language-javascript">           <span class="attr">data</span>:{</span></span><br><span class="line"><span class="language-javascript">               <span class="attr">message</span>:<span class="string">"&lt;a href=''&gt;百知欢迎您&lt;/a&gt;"</span></span></span><br><span class="line"><span class="language-javascript">           }</span></span><br><span class="line"><span class="language-javascript">       })</span></span><br><span class="line"><span class="language-javascript">   </span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br></pre></td></tr></tbody></table></figure>

<h3 id="3-3、v-text和v-html对比"><a href="#3-3、v-text和v-html对比" class="headerlink" title="3.3、v-text和v-html对比"></a>3.3、v-text和v-html对比</h3><p><strong>代码：</strong> </p>
<figure class="highlight plaintext"><table><tbody><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br></pre></td><td class="code"><pre><span class="line">&lt;!DOCTYPE html&gt;</span><br><span class="line">&lt;html lang="en"&gt;</span><br><span class="line">&lt;head&gt;</span><br><span class="line">    &lt;meta charset="UTF-8"&gt;</span><br><span class="line">    &lt;title&gt;vue系列课程&lt;/title&gt;</span><br><span class="line">&lt;/head&gt;</span><br><span class="line">&lt;body &gt;</span><br><span class="line">    &lt;div id="app" class="aa"&gt;</span><br><span class="line">        &lt;h2&gt;{{msg}} 您好&lt;/h2&gt;</span><br><span class="line">        &lt;!--vue提供两个指令： v-text v-html 都可以直接根据属性名获取data数据渲染到指定标签内--&gt;</span><br><span class="line"></span><br><span class="line">        &lt;!--v-text--&gt;</span><br><span class="line">        &lt;h2&gt;&lt;span v-text="msg"&gt;&lt;/span&gt; 您好&lt;/h2&gt;</span><br><span class="line">        &lt;!--</span><br><span class="line">            v-text: {{}} 取值区别：</span><br><span class="line">                1.使用{{}}取值不会将标签原始数据覆盖 使用v-text获取数据会将标签中原始内容覆盖</span><br><span class="line">                2.v-text获取数据时不会出现插值闪烁  {{属性名}} ===&gt; 插值表达式：容易出现插值闪烁 插值闪烁：当网络不好条件情况下使用{{}}方式获取数据</span><br><span class="line">        --&gt;</span><br><span class="line">        &lt;h2 v-html="msg"&gt;&lt;/h2&gt;</span><br><span class="line">        &lt;!--</span><br><span class="line">            共同点：都可以直接根据data中数据名，将数据渲染到标签内部</span><br><span class="line">            v-text: v-text将获取数据直接以文本形式渲染到标签内部                innerText</span><br><span class="line">            v-html: v-html将获取数据中含有html标签解析之后渲染到对应标签内部     innerHtml</span><br><span class="line">        --&gt;</span><br><span class="line">        &lt;h1 &gt;{{content}}&lt;/h1&gt;</span><br><span class="line">        &lt;h1 v-text="content"&gt;&lt;/h1&gt;</span><br><span class="line">        &lt;h1 v-html="content"&gt;&lt;/h1&gt;</span><br><span class="line">    &lt;/div&gt;</span><br><span class="line">&lt;/body&gt;</span><br><span class="line">&lt;/html&gt;</span><br><span class="line">&lt;!--引入vue.js文件--&gt;</span><br><span class="line">&lt;script src="js/vue.js"&gt;&lt;/script&gt;</span><br><span class="line">&lt;script&gt;</span><br><span class="line">    var app = new Vue({</span><br><span class="line">       el:"#app",  //指定vue作用范围</span><br><span class="line">       data:{      //用来给vue实例绑定一系列数据</span><br><span class="line">            msg:"hello vue",</span><br><span class="line">            content : "欢迎来到&lt;a href='http://www.baidu.com'&gt;百度&lt;/a&gt;",</span><br><span class="line">       }</span><br><span class="line">    });</span><br><span class="line">&lt;/script&gt;</span><br></pre></td></tr></tbody></table></figure>

<p><strong>运行结果：</strong></p>
<p><img src="https://yichen-blog.oss-cn-beijing.aliyuncs.com//note-image/2023/07/16/20230716-134834.png" alt="image-20210709215316787"></p>
<h2 id="4、vue中事件绑定-v-on"><a href="#4、vue中事件绑定-v-on" class="headerlink" title="4、vue中事件绑定(v-on)"></a>4、vue中事件绑定(v-on)</h2><h3 id="4-1、绑定事件基本语法"><a href="#4-1、绑定事件基本语法" class="headerlink" title="4.1、绑定事件基本语法"></a>4.1、绑定事件基本语法</h3><p><strong>1、vue事件绑定（一）</strong> </p>
<figure class="highlight html"><table><tbody><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br></pre></td><td class="code"><pre><span class="line"><span class="meta">&lt;!DOCTYPE <span class="keyword">html</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">html</span> <span class="attr">lang</span>=<span class="string">"en"</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">head</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">meta</span> <span class="attr">charset</span>=<span class="string">"UTF-8"</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">title</span>&gt;</span>vue系列课程<span class="tag">&lt;/<span class="name">title</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">head</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">body</span> &gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">div</span> <span class="attr">id</span>=<span class="string">"app"</span> &gt;</span></span><br><span class="line">        <span class="tag">&lt;<span class="name">h2</span>&gt;</span>{{msg}}<span class="tag">&lt;/<span class="name">h2</span>&gt;</span></span><br><span class="line">        <span class="tag">&lt;<span class="name">h2</span> <span class="attr">v-text</span>=<span class="string">"msg"</span>&gt;</span><span class="tag">&lt;/<span class="name">h2</span>&gt;</span></span><br><span class="line">        <span class="tag">&lt;<span class="name">h2</span> <span class="attr">v-html</span>=<span class="string">"msg"</span>&gt;</span><span class="tag">&lt;/<span class="name">h2</span>&gt;</span></span><br><span class="line"></span><br><span class="line">        <span class="comment">&lt;!--</span></span><br><span class="line"><span class="comment">            js 事件三要素</span></span><br><span class="line"><span class="comment">                1.事件源：发生事件源头称之为事件源，一般指的是html标签</span></span><br><span class="line"><span class="comment">                2.事件：发生特定动作 onclick单击 dbclick 双击 onkeyup ......</span></span><br><span class="line"><span class="comment">                3.监听器：事件处理器程序 事件处理函数 function(){}</span></span><br><span class="line"><span class="comment">            vue 事件：v-on</span></span><br><span class="line"><span class="comment">                1.在vue中给对应标签绑定事件可以通过vue提供v-on指令进行事件绑定 ==&gt; v-on:事件名</span></span><br><span class="line"><span class="comment">                2.在vue中事件处理函数统一声明在vue实例中methods属性</span></span><br><span class="line"><span class="comment">        --&gt;</span></span><br><span class="line">        <span class="comment">&lt;!--给button按钮绑定多个事件--&gt;</span></span><br><span class="line">        <span class="tag">&lt;<span class="name">input</span> <span class="attr">type</span>=<span class="string">"button"</span> <span class="attr">value</span>=<span class="string">"点我"</span> <span class="attr">v-on:click</span>=<span class="string">"aaa"</span> <span class="attr">v-on:mouseover</span>=<span class="string">"bbb"</span> <span class="attr">v-on:mouseout</span>=<span class="string">"ccc"</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">body</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">html</span>&gt;</span></span><br><span class="line"><span class="comment">&lt;!--引入vue.js文件--&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">script</span> <span class="attr">src</span>=<span class="string">"js/vue.js"</span>&gt;</span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">script</span>&gt;</span><span class="language-javascript"></span></span><br><span class="line"><span class="language-javascript">    <span class="keyword">var</span> app = <span class="keyword">new</span> <span class="title class_">Vue</span>({</span></span><br><span class="line"><span class="language-javascript">       <span class="attr">el</span>:<span class="string">"#app"</span>,  <span class="comment">//指定vue实例作用范围</span></span></span><br><span class="line"><span class="language-javascript">       <span class="attr">data</span>:{      <span class="comment">//用来给vue实例绑定一系列数据</span></span></span><br><span class="line"><span class="language-javascript">            <span class="attr">msg</span>:<span class="string">"hello vue"</span>,</span></span><br><span class="line"><span class="language-javascript">       },</span></span><br><span class="line"><span class="language-javascript">       <span class="attr">methods</span>:{ <span class="comment">//用来给当前vue实例对象，声明一系列函数</span></span></span><br><span class="line"><span class="language-javascript">           <span class="attr">aaa</span>: <span class="keyword">function</span> (<span class="params"></span>) {</span></span><br><span class="line"><span class="language-javascript">                <span class="title function_">alert</span>(<span class="string">"aaa"</span>);</span></span><br><span class="line"><span class="language-javascript">           },</span></span><br><span class="line"><span class="language-javascript">           <span class="attr">bbb</span>: <span class="keyword">function</span> (<span class="params"></span>) {</span></span><br><span class="line"><span class="language-javascript">                <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="string">"mouse over"</span>);</span></span><br><span class="line"><span class="language-javascript">           },</span></span><br><span class="line"><span class="language-javascript">           <span class="attr">ccc</span>: <span class="keyword">function</span> (<span class="params"></span>) {</span></span><br><span class="line"><span class="language-javascript">               <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="string">"mouse out"</span>);</span></span><br><span class="line"><span class="language-javascript">           }</span></span><br><span class="line"><span class="language-javascript">       }</span></span><br><span class="line"><span class="language-javascript">    });</span></span><br><span class="line"><span class="language-javascript"></span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br></pre></td></tr></tbody></table></figure>

<p><strong>2、vue事件绑定（二）</strong></p>
<p>给一个按钮绑定点击+1事件。</p>
<figure class="highlight html"><table><tbody><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br></pre></td><td class="code"><pre><span class="line"><span class="meta">&lt;!DOCTYPE <span class="keyword">html</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">html</span> <span class="attr">lang</span>=<span class="string">"en"</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">head</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">meta</span> <span class="attr">charset</span>=<span class="string">"UTF-8"</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">title</span>&gt;</span>vue系列课程<span class="tag">&lt;/<span class="name">title</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">head</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">body</span> &gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">div</span> <span class="attr">id</span>=<span class="string">"app"</span> &gt;</span></span><br><span class="line">        <span class="tag">&lt;<span class="name">h1</span>&gt;</span>{{msg}}<span class="tag">&lt;/<span class="name">h1</span>&gt;</span></span><br><span class="line">        <span class="tag">&lt;<span class="name">h1</span>&gt;</span>{{age}}<span class="tag">&lt;/<span class="name">h1</span>&gt;</span></span><br><span class="line">        <span class="comment">&lt;!--</span></span><br><span class="line"><span class="comment">            vue事件：</span></span><br><span class="line"><span class="comment">                1. 使用v-on：事件名</span></span><br><span class="line"><span class="comment">                2. 函数名统一定义在vue实例中 methods 属性中</span></span><br><span class="line"><span class="comment">        --&gt;</span></span><br><span class="line">        <span class="tag">&lt;<span class="name">input</span> <span class="attr">type</span>=<span class="string">"button"</span> <span class="attr">value</span>=<span class="string">"点我给年龄+1"</span> <span class="attr">v-on:click</span>=<span class="string">"incrmentAge"</span>&gt;</span></span><br><span class="line">        <span class="tag">&lt;<span class="name">input</span> <span class="attr">type</span>=<span class="string">"button"</span> <span class="attr">value</span>=<span class="string">"点我给年龄-1"</span> <span class="attr">v-on:click</span>=<span class="string">"decrmentAge"</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">body</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">html</span>&gt;</span></span><br><span class="line"><span class="comment">&lt;!--引入vue.js文件--&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">script</span> <span class="attr">src</span>=<span class="string">"js/vue.js"</span>&gt;</span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">script</span>&gt;</span><span class="language-javascript"></span></span><br><span class="line"><span class="language-javascript">    <span class="keyword">var</span> app = <span class="keyword">new</span> <span class="title class_">Vue</span>({</span></span><br><span class="line"><span class="language-javascript">       <span class="attr">el</span>:<span class="string">"#app"</span>,  <span class="comment">//指定vue实例作用范围</span></span></span><br><span class="line"><span class="language-javascript">       <span class="attr">data</span>:{      <span class="comment">//用来给vue实例绑定一系列数据</span></span></span><br><span class="line"><span class="language-javascript">            <span class="attr">msg</span>:<span class="string">"hello vue"</span>,</span></span><br><span class="line"><span class="language-javascript">            <span class="attr">age</span>:<span class="number">23</span>,</span></span><br><span class="line"><span class="language-javascript">       },</span></span><br><span class="line"><span class="language-javascript">       <span class="attr">methods</span>:{ <span class="comment">//用来给当前vue实例对象，声明一系列函数</span></span></span><br><span class="line"><span class="language-javascript">           <span class="attr">incrmentAge</span>:<span class="keyword">function</span> (<span class="params"></span>) {</span></span><br><span class="line"><span class="language-javascript">               <span class="comment">//this对象代表当前vue实例对象</span></span></span><br><span class="line"><span class="language-javascript">               <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="variable language_">this</span>);</span></span><br><span class="line"><span class="language-javascript">               <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="variable language_">this</span>.<span class="property">age</span>)</span></span><br><span class="line"><span class="language-javascript">               <span class="keyword">if</span>(<span class="variable language_">this</span>.<span class="property">age</span> &gt;= <span class="number">120</span>) <span class="keyword">return</span>;</span></span><br><span class="line"><span class="language-javascript">               <span class="variable language_">this</span>.<span class="property">age</span> ++;  <span class="comment">//vue实例中data数据age发生变化</span></span></span><br><span class="line"><span class="language-javascript">           },</span></span><br><span class="line"><span class="language-javascript">           <span class="attr">decrmentAge</span>:<span class="keyword">function</span> (<span class="params"></span>) { <span class="comment">//定义函数</span></span></span><br><span class="line"><span class="language-javascript">               <span class="keyword">if</span>(<span class="variable language_">this</span>.<span class="property">age</span> &lt; <span class="number">2</span>) <span class="keyword">return</span> ;</span></span><br><span class="line"><span class="language-javascript">               <span class="variable language_">this</span>.<span class="property">age</span> --;</span></span><br><span class="line"><span class="language-javascript">           }</span></span><br><span class="line"><span class="language-javascript">       }</span></span><br><span class="line"><span class="language-javascript">    });</span></span><br><span class="line"><span class="language-javascript"></span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br></pre></td></tr></tbody></table></figure>

<p><strong>3、总结</strong> </p>
<p>​	事件源: 发生事件<code>dom</code>元素      事件: 发生特定的动作   <code>click....</code>      监听器  发生特定动作之后的事件处理程序  通常是<code>js</code>中函数</p>
<ol>
<li><p>在<code>vue</code>中绑定事件是通过<code>v-on</code>指令来完成的 <code>v-on:</code>事件名 如  <code>v-on:click</code></p>
</li>
<li><p>在<code>v-on:</code>事件名的赋值语句中是当前事件触发调用的函数名</p>
</li>
<li><p>在<code>vue</code>中事件的函数统一定义在<code>Vue</code>实例的<code>methods</code>属性中</p>
</li>
<li><p>在<code>vue</code>定义的事件中<code>this</code>指的就是当前的<code>Vue</code>实例,日后可以在事件中通过使用<code>this</code>获取<code>Vue</code>实例中相关数据 调用<code>methods</code>中相关方法</p>
</li>
</ol>
<h3 id="4-2、Vue中事件的简化语法"><a href="#4-2、Vue中事件的简化语法" class="headerlink" title="4.2、Vue中事件的简化语法"></a>4.2、Vue中事件的简化语法</h3><figure class="highlight html"><table><tbody><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br></pre></td><td class="code"><pre><span class="line"><span class="meta">&lt;!DOCTYPE <span class="keyword">html</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">html</span> <span class="attr">lang</span>=<span class="string">"en"</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">head</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">meta</span> <span class="attr">charset</span>=<span class="string">"UTF-8"</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">title</span>&gt;</span>vue系列课程<span class="tag">&lt;/<span class="name">title</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">head</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">body</span> &gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">div</span> <span class="attr">id</span>=<span class="string">"app"</span> &gt;</span></span><br><span class="line">        <span class="tag">&lt;<span class="name">h1</span>&gt;</span>{{msg}}<span class="tag">&lt;/<span class="name">h1</span>&gt;</span></span><br><span class="line">        <span class="tag">&lt;<span class="name">h1</span>&gt;</span>{{age}}<span class="tag">&lt;/<span class="name">h1</span>&gt;</span></span><br><span class="line"></span><br><span class="line">        <span class="comment">&lt;!--</span></span><br><span class="line"><span class="comment">            vue事件绑定  v-on：事件名  简化写法===&gt; @事件名</span></span><br><span class="line"><span class="comment">        --&gt;</span></span><br><span class="line">        <span class="tag">&lt;<span class="name">input</span> <span class="attr">type</span>=<span class="string">"button"</span> <span class="attr">value</span>=<span class="string">"点我改变年龄"</span> @<span class="attr">click</span>=<span class="string">"changeAge"</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">body</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">html</span>&gt;</span></span><br><span class="line"><span class="comment">&lt;!--引入vue.js文件--&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">script</span> <span class="attr">src</span>=<span class="string">"js/vue.js"</span>&gt;</span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">script</span>&gt;</span><span class="language-javascript"></span></span><br><span class="line"><span class="language-javascript">    <span class="keyword">var</span> app = <span class="keyword">new</span> <span class="title class_">Vue</span>({</span></span><br><span class="line"><span class="language-javascript">       <span class="attr">el</span>:<span class="string">"#app"</span>,  <span class="comment">//指定vue实例作用范围</span></span></span><br><span class="line"><span class="language-javascript">       <span class="attr">data</span>:{      <span class="comment">//用来给vue实例绑定一系列数据</span></span></span><br><span class="line"><span class="language-javascript">            <span class="attr">msg</span>:<span class="string">"hello vue"</span>,</span></span><br><span class="line"><span class="language-javascript">            <span class="attr">age</span>:<span class="number">23</span>,</span></span><br><span class="line"><span class="language-javascript">       },</span></span><br><span class="line"><span class="language-javascript">       <span class="attr">methods</span>:{</span></span><br><span class="line"><span class="language-javascript">           <span class="attr">changeAge</span>:<span class="keyword">function</span> (<span class="params"></span>) { </span></span><br><span class="line"><span class="language-javascript">               <span class="variable language_">this</span>.<span class="property">age</span> ++ ;</span></span><br><span class="line"><span class="language-javascript">           }</span></span><br><span class="line"><span class="language-javascript">       }</span></span><br><span class="line"><span class="language-javascript">    });</span></span><br><span class="line"><span class="language-javascript"></span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br></pre></td></tr></tbody></table></figure>

<figure class="highlight markdown"><table><tbody><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line"><span class="section"># 总结:</span></span><br><span class="line"><span class="code">			1.日后在vue中绑定事件时可以通过@符号形式 简化  v-on 的事件绑定</span></span><br></pre></td></tr></tbody></table></figure>



<h3 id="4-3、Vue事件函数两种写法"><a href="#4-3、Vue事件函数两种写法" class="headerlink" title="4.3、Vue事件函数两种写法"></a>4.3、Vue事件函数两种写法</h3><figure class="highlight html"><table><tbody><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">script</span>&gt;</span><span class="language-javascript"></span></span><br><span class="line"><span class="language-javascript">    <span class="keyword">var</span> app = <span class="keyword">new</span> <span class="title class_">Vue</span>({</span></span><br><span class="line"><span class="language-javascript">       <span class="attr">el</span>:<span class="string">"#app"</span>,  <span class="comment">//指定vue实例作用范围</span></span></span><br><span class="line"><span class="language-javascript">       <span class="attr">data</span>:{      <span class="comment">//用来给vue实例绑定一系列数据</span></span></span><br><span class="line"><span class="language-javascript">            <span class="attr">msg</span>:<span class="string">"hello vue"</span>,</span></span><br><span class="line"><span class="language-javascript">            <span class="attr">age</span>:<span class="number">23</span>,</span></span><br><span class="line"><span class="language-javascript">       },</span></span><br><span class="line"><span class="language-javascript">       <span class="attr">methods</span>:{</span></span><br><span class="line"><span class="language-javascript">           <span class="comment">/*changeAge:function () { //定义事件 简化写法</span></span></span><br><span class="line"><span class="comment"><span class="language-javascript">               this.age ++ ;</span></span></span><br><span class="line"><span class="comment"><span class="language-javascript">           }*/</span></span></span><br><span class="line"><span class="language-javascript">           <span class="title function_">changeAge</span>(<span class="params"></span>){ <span class="comment">//es6语法 ecmascript 6版本</span></span></span><br><span class="line"><span class="language-javascript">               <span class="variable language_">this</span>.<span class="property">age</span> ++ ;</span></span><br><span class="line"><span class="language-javascript">           }</span></span><br><span class="line"><span class="language-javascript">       }</span></span><br><span class="line"><span class="language-javascript">    });</span></span><br><span class="line"><span class="language-javascript"></span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br></pre></td></tr></tbody></table></figure>

<figure class="highlight markdown"><table><tbody><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line"><span class="section"># 总结:</span></span><br><span class="line"><span class="code">			1.在Vue中事件定义存在两种写法  </span></span><br><span class="line"><span class="code">				 一种是 函数名:function(){}       </span></span><br><span class="line"><span class="code">			     一种是 函数名(){} 推荐</span></span><br></pre></td></tr></tbody></table></figure>

<h3 id="4-4、Vue事件参数传递"><a href="#4-4、Vue事件参数传递" class="headerlink" title="4.4、Vue事件参数传递"></a>4.4、Vue事件参数传递</h3><p>我们还可以给vue事件中传递参数。</p>
<figure class="highlight html"><table><tbody><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br></pre></td><td class="code"><pre><span class="line"><span class="meta">&lt;!DOCTYPE <span class="keyword">html</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">html</span> <span class="attr">lang</span>=<span class="string">"en"</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">head</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">meta</span> <span class="attr">charset</span>=<span class="string">"UTF-8"</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">title</span>&gt;</span>vue系列课程<span class="tag">&lt;/<span class="name">title</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">head</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">body</span> &gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">div</span> <span class="attr">id</span>=<span class="string">"app"</span> &gt;</span></span><br><span class="line">        <span class="tag">&lt;<span class="name">h1</span>&gt;</span>{{msg}}<span class="tag">&lt;/<span class="name">h1</span>&gt;</span></span><br><span class="line">        <span class="tag">&lt;<span class="name">h1</span>&gt;</span>{{age}}<span class="tag">&lt;/<span class="name">h1</span>&gt;</span></span><br><span class="line"></span><br><span class="line">        <span class="comment">&lt;!--</span></span><br><span class="line"><span class="comment">            vue事件绑定  v-on：事件名  简化 @事件名="事件函数名(参数......)"</span></span><br><span class="line"><span class="comment">        --&gt;</span></span><br><span class="line">        </span><br><span class="line">        <span class="comment">&lt;!--多个参数使用','隔开--&gt;</span></span><br><span class="line">        <span class="tag">&lt;<span class="name">input</span> <span class="attr">type</span>=<span class="string">"button"</span> <span class="attr">value</span>=<span class="string">"点我改变年龄的值"</span> @<span class="attr">click</span>=<span class="string">"changeAge(10,'xiaohei')"</span>&gt;</span> </span><br><span class="line">    <span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">body</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">html</span>&gt;</span></span><br><span class="line"><span class="comment">&lt;!--引入vue.js文件--&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">script</span> <span class="attr">src</span>=<span class="string">"js/vue.js"</span>&gt;</span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">script</span>&gt;</span><span class="language-javascript"></span></span><br><span class="line"><span class="language-javascript">    <span class="keyword">var</span> app = <span class="keyword">new</span> <span class="title class_">Vue</span>({</span></span><br><span class="line"><span class="language-javascript">        <span class="attr">el</span>:<span class="string">"#app"</span>,  <span class="comment">//指定vue实例作用范围</span></span></span><br><span class="line"><span class="language-javascript">        <span class="attr">data</span>:{      <span class="comment">//用来给vue实例绑定一系列数据</span></span></span><br><span class="line"><span class="language-javascript">            <span class="attr">msg</span>:<span class="string">"hello vue"</span>,</span></span><br><span class="line"><span class="language-javascript">            <span class="attr">age</span>:<span class="number">23</span>,</span></span><br><span class="line"><span class="language-javascript">        },</span></span><br><span class="line"><span class="language-javascript">        <span class="attr">methods</span>:{</span></span><br><span class="line"><span class="language-javascript">            <span class="title function_">changeAge</span>(<span class="params">number,name</span>){ <span class="comment">//定义事件</span></span></span><br><span class="line"><span class="language-javascript">                <span class="variable language_">console</span>.<span class="title function_">log</span>(number);</span></span><br><span class="line"><span class="language-javascript">                <span class="variable language_">console</span>.<span class="title function_">log</span>(name);</span></span><br><span class="line"><span class="language-javascript">                <span class="variable language_">this</span>.<span class="property">age</span> += number ;</span></span><br><span class="line"><span class="language-javascript">            }</span></span><br><span class="line"><span class="language-javascript">        }</span></span><br><span class="line"><span class="language-javascript">    });</span></span><br><span class="line"><span class="language-javascript"></span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br></pre></td></tr></tbody></table></figure>

<figure class="highlight markdown"><table><tbody><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line"><span class="section"># 总结:</span></span><br><span class="line"><span class="code">	1.在使用事件时,可以直接在事件调用处给事件进行参数传递,在事件定义处通过定义对应变量接收传递的参数</span></span><br></pre></td></tr></tbody></table></figure>

<hr>
<h2 id="5、v-show-v-if-v-bind"><a href="#5、v-show-v-if-v-bind" class="headerlink" title="5、v-show v-if v-bind"></a>5、v-show v-if v-bind</h2><h3 id="5-1、v-show、v-if使用"><a href="#5-1、v-show、v-if使用" class="headerlink" title="5.1、v-show、v-if使用"></a>5.1、v-show、v-if使用</h3><blockquote>
<p><code>v-show</code>: 用来控制页面中某个标签元素是否展示       </p>
<p><code>v-if</code>: 用来控制页面元素是否展示       </p>
</blockquote>
<figure class="highlight html"><table><tbody><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br></pre></td><td class="code"><pre><span class="line"><span class="meta">&lt;!DOCTYPE <span class="keyword">html</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">html</span> <span class="attr">lang</span>=<span class="string">"en"</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">head</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">meta</span> <span class="attr">charset</span>=<span class="string">"UTF-8"</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">title</span>&gt;</span>vue系列课程<span class="tag">&lt;/<span class="name">title</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">head</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">body</span> &gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">div</span> <span class="attr">id</span>=<span class="string">"app"</span> &gt;</span></span><br><span class="line">        <span class="tag">&lt;<span class="name">h2</span>&gt;</span>{{msg}}<span class="tag">&lt;/<span class="name">h2</span>&gt;</span></span><br><span class="line">        <span class="comment">&lt;!--</span></span><br><span class="line"><span class="comment">            v-if、v-show ： 作用：都是用来控制页面中标签是否展示和隐藏 使用：标签：v-if="true|false" v-show="true|false"</span></span><br><span class="line"><span class="comment">            区别：</span></span><br><span class="line"><span class="comment">                v-show: 底层在控制页面标签是否展示时底层使用的是css 中 display 属性来标签展示和隐藏  推荐使用：v-show 数据量比较大 控制显示状态切换频繁</span></span><br><span class="line"><span class="comment">                v-if  : 底层在控制页面标签是否展示时底层是直接操作dom元素，通过对dom元素删除和添加来控制标签的展示和隐藏</span></span><br><span class="line"><span class="comment">        --&gt;</span></span><br><span class="line">        <span class="comment">&lt;!--v-show--&gt;</span></span><br><span class="line">        <span class="tag">&lt;<span class="name">h1</span> <span class="attr">v-show</span>=<span class="string">"isShow"</span>&gt;</span>{{content}}<span class="tag">&lt;/<span class="name">h1</span>&gt;</span></span><br><span class="line">        <span class="comment">&lt;!--v-if--&gt;</span></span><br><span class="line">        <span class="tag">&lt;<span class="name">h1</span> <span class="attr">v-if</span>=<span class="string">"isShow"</span>&gt;</span>{{content}}<span class="tag">&lt;/<span class="name">h1</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">body</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">html</span>&gt;</span></span><br><span class="line"><span class="comment">&lt;!--引入vue.js文件--&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">script</span> <span class="attr">src</span>=<span class="string">"js/vue.js"</span>&gt;</span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">script</span>&gt;</span><span class="language-javascript"></span></span><br><span class="line"><span class="language-javascript">    <span class="keyword">var</span> app = <span class="keyword">new</span> <span class="title class_">Vue</span>({</span></span><br><span class="line"><span class="language-javascript">        <span class="attr">el</span>:<span class="string">"#app"</span>,  <span class="comment">//指定vue实例作用范围</span></span></span><br><span class="line"><span class="language-javascript">        <span class="attr">data</span>:{      <span class="comment">//用来给vue实例绑定一系列数据</span></span></span><br><span class="line"><span class="language-javascript">            <span class="attr">msg</span>:<span class="string">"hello vue"</span>,</span></span><br><span class="line"><span class="language-javascript">            <span class="attr">content</span>: <span class="string">"vue学习"</span>,</span></span><br><span class="line"><span class="language-javascript">            <span class="attr">isShow</span>:<span class="literal">true</span></span></span><br><span class="line"><span class="language-javascript">        },</span></span><br><span class="line"><span class="language-javascript">        <span class="attr">methods</span>:{ <span class="comment">//用来给vue实例定义事件处理函数</span></span></span><br><span class="line"><span class="language-javascript"></span></span><br><span class="line"><span class="language-javascript">        }</span></span><br><span class="line"><span class="language-javascript">    });</span></span><br><span class="line"><span class="language-javascript"></span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br></pre></td></tr></tbody></table></figure>

<p><strong>总结：</strong></p>
<ol>
<li>在使用v-show时可以直接书写boolean值控制元素展示,也可以通过变量控制标签展示和隐藏。</li>
<li>在v-show中可以通过boolean表达式控制标签的展示和隐藏。</li>
<li>v-if、v-show ： 作用：都是用来控制页面中标签是否展示和隐藏 使用：标签：<code>v-if="true|false" </code>,<code>v-show="true|false"</code></li>
<li>区别：<ul>
<li>v-show: 底层在控制页面标签是否展示时底层使用的是css 中 display 属性来标签展示和隐藏 。推荐使用：v-show  在数据量比较大和控制显示状态切换频繁时。</li>
<li>v-if  : 底层在控制页面标签是否展示时底层是直接操作dom元素，通过对dom元素删除和添加来控制标签的展示和隐藏。</li>
</ul>
</li>
</ol>
<h3 id="5-2、v-show、v-if小案例"><a href="#5-2、v-show、v-if小案例" class="headerlink" title="5.2、v-show、v-if小案例"></a>5.2、v-show、v-if小案例</h3><p><strong>1、v-show、v-if显示隐藏案例(一)</strong></p>
<figure class="highlight html"><table><tbody><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br></pre></td><td class="code"><pre><span class="line"><span class="meta">&lt;!DOCTYPE <span class="keyword">html</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">html</span> <span class="attr">lang</span>=<span class="string">"en"</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">head</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">meta</span> <span class="attr">charset</span>=<span class="string">"UTF-8"</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">title</span>&gt;</span>vue系列课程<span class="tag">&lt;/<span class="name">title</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">head</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">body</span> &gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">div</span> <span class="attr">id</span>=<span class="string">"app"</span> &gt;</span></span><br><span class="line">        <span class="comment">&lt;!-- v-show v-if --&gt;</span></span><br><span class="line">        <span class="tag">&lt;<span class="name">h2</span> <span class="attr">v-show</span>=<span class="string">"isShow"</span>&gt;</span>{{msg}}<span class="tag">&lt;/<span class="name">h2</span>&gt;</span></span><br><span class="line"></span><br><span class="line">        <span class="comment">&lt;!--绑定事件 单击事件 @click--&gt;</span></span><br><span class="line">        <span class="tag">&lt;<span class="name">input</span> <span class="attr">type</span>=<span class="string">"button"</span> <span class="attr">value</span>=<span class="string">"显示"</span> @<span class="attr">click</span>=<span class="string">"show"</span>&gt;</span></span><br><span class="line">        <span class="tag">&lt;<span class="name">input</span> <span class="attr">type</span>=<span class="string">"button"</span> <span class="attr">value</span>=<span class="string">"隐藏"</span> @<span class="attr">click</span>=<span class="string">"hidden"</span>&gt;</span></span><br><span class="line">        <span class="tag">&lt;<span class="name">input</span> <span class="attr">type</span>=<span class="string">"button"</span> <span class="attr">value</span>=<span class="string">"切换显示状态"</span> @<span class="attr">click</span>=<span class="string">"changeState"</span>&gt;</span></span><br><span class="line">        <span class="tag">&lt;<span class="name">input</span> <span class="attr">type</span>=<span class="string">"button"</span> <span class="attr">value</span>=<span class="string">"切换显示状态,另一种写法"</span> @<span class="attr">click</span>=<span class="string">"isShow=!isShow"</span>&gt;</span></span><br><span class="line"></span><br><span class="line">    <span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">body</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">html</span>&gt;</span></span><br><span class="line"><span class="comment">&lt;!--引入vue.js文件--&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">script</span> <span class="attr">src</span>=<span class="string">"js/vue.js"</span>&gt;</span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">script</span>&gt;</span><span class="language-javascript"></span></span><br><span class="line"><span class="language-javascript">    <span class="keyword">var</span> app = <span class="keyword">new</span> <span class="title class_">Vue</span>({</span></span><br><span class="line"><span class="language-javascript">        <span class="attr">el</span>:<span class="string">"#app"</span>,  <span class="comment">//指定vue实例作用范围</span></span></span><br><span class="line"><span class="language-javascript">        <span class="attr">data</span>:{      <span class="comment">//用来给vue实例绑定一系列数据</span></span></span><br><span class="line"><span class="language-javascript">            <span class="attr">msg</span>:<span class="string">"hello vue"</span>,</span></span><br><span class="line"><span class="language-javascript">            <span class="attr">isShow</span>:<span class="literal">true</span></span></span><br><span class="line"><span class="language-javascript">        },</span></span><br><span class="line"><span class="language-javascript">        <span class="attr">methods</span>:{ <span class="comment">//用来给vue实例定义事件处理函数</span></span></span><br><span class="line"><span class="language-javascript">            <span class="title function_">show</span>(<span class="params"></span>){  <span class="comment">//用来显示</span></span></span><br><span class="line"><span class="language-javascript">                <span class="variable language_">this</span>.<span class="property">isShow</span> = <span class="literal">true</span>;</span></span><br><span class="line"><span class="language-javascript">            },</span></span><br><span class="line"><span class="language-javascript">            <span class="title function_">hidden</span>(<span class="params"></span>){<span class="comment">//用来隐藏</span></span></span><br><span class="line"><span class="language-javascript">                <span class="variable language_">this</span>.<span class="property">isShow</span> = <span class="literal">false</span>;</span></span><br><span class="line"><span class="language-javascript">            },</span></span><br><span class="line"><span class="language-javascript">            <span class="title function_">changeState</span>(<span class="params"></span>){ <span class="comment">//切换显示状态</span></span></span><br><span class="line"><span class="language-javascript">                <span class="variable language_">this</span>.<span class="property">isShow</span> = !<span class="variable language_">this</span>.<span class="property">isShow</span>;</span></span><br><span class="line"><span class="language-javascript">            },</span></span><br><span class="line"><span class="language-javascript">        }</span></span><br><span class="line"><span class="language-javascript">    });</span></span><br><span class="line"><span class="language-javascript"></span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br></pre></td></tr></tbody></table></figure>

<p><strong>2、v-show、v-if显示隐藏案例(二)</strong></p>
<figure class="highlight plaintext"><table><tbody><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br></pre></td><td class="code"><pre><span class="line">&lt;!DOCTYPE html&gt;</span><br><span class="line">&lt;html lang="en"&gt;</span><br><span class="line">&lt;head&gt;</span><br><span class="line">    &lt;meta charset="UTF-8"&gt;</span><br><span class="line">    &lt;title&gt;vue系列课程&lt;/title&gt;</span><br><span class="line">&lt;/head&gt;</span><br><span class="line">&lt;body &gt;</span><br><span class="line">    &lt;div id="app" &gt;</span><br><span class="line">        &lt;!-- v-show v-if --&gt;</span><br><span class="line">        &lt;h2&gt;{{msg}}&lt;/h2&gt;</span><br><span class="line"></span><br><span class="line">        &lt;!--图片添加鼠标移入事件--&gt;</span><br><span class="line">        &lt;img width="200" v-show="isShow" @mouseover="hide" style="border: 5px red solid" src="https://img0.baidu.com/it/u=384452397,1089369801&amp;fm=26&amp;fmt=auto&amp;gp=0.jpg" alt="这是图片"&gt;</span><br><span class="line">    &lt;/div&gt;</span><br><span class="line">&lt;/body&gt;</span><br><span class="line">&lt;/html&gt;</span><br><span class="line">&lt;!--引入vue.js文件--&gt;</span><br><span class="line">&lt;script src="js/vue.js"&gt;&lt;/script&gt;</span><br><span class="line">&lt;script&gt;</span><br><span class="line">    var app = new Vue({</span><br><span class="line">        el:"#app",  //指定vue实例作用范围</span><br><span class="line">        data:{      //用来给vue实例绑定一系列数据</span><br><span class="line">            msg:"hello vue",</span><br><span class="line">            isShow:true</span><br><span class="line">        },</span><br><span class="line">        methods:{ //用来给vue实例定义事件处理函数</span><br><span class="line">            hide(){</span><br><span class="line">                this.isShow = false;</span><br><span class="line">            }</span><br><span class="line">        }</span><br><span class="line">    });</span><br><span class="line">&lt;/script&gt;</span><br></pre></td></tr></tbody></table></figure>

<h3 id="5-3、v-bind"><a href="#5-3、v-bind" class="headerlink" title="5.3、v-bind"></a>5.3、v-bind</h3><blockquote>
<p><code>v-bind</code>: 用来绑定标签的属性从而通过vue动态修改标签的属性</p>
</blockquote>
<figure class="highlight html"><table><tbody><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br></pre></td><td class="code"><pre><span class="line"><span class="meta">&lt;!DOCTYPE <span class="keyword">html</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">html</span> <span class="attr">lang</span>=<span class="string">"en"</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">head</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">meta</span> <span class="attr">charset</span>=<span class="string">"UTF-8"</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">title</span>&gt;</span>vue系列课程<span class="tag">&lt;/<span class="name">title</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">head</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">body</span> &gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">div</span> <span class="attr">id</span>=<span class="string">"app"</span> &gt;</span></span><br><span class="line"></span><br><span class="line">        <span class="tag">&lt;<span class="name">h2</span>&gt;</span>{{msg}}<span class="tag">&lt;/<span class="name">h2</span>&gt;</span></span><br><span class="line"></span><br><span class="line">       <span class="comment">&lt;!--</span></span><br><span class="line"><span class="comment">            v-bind: 绑定 作用：用来将html标签中相关属性绑定到vue实例中，日后通过对vue实例中数据修改，影响到对应标签中属性变化</span></span><br><span class="line"><span class="comment">                        语法：v-bind:属性名</span></span><br><span class="line"><span class="comment">        --&gt;</span></span><br><span class="line">        <span class="tag">&lt;<span class="name">img</span> <span class="attr">v-bind:width</span>=<span class="string">"width"</span> <span class="attr">v-bind:src</span>=<span class="string">"imgSrc"</span> <span class="attr">v-bind:alt</span>=<span class="string">"tip"</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">body</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">html</span>&gt;</span></span><br><span class="line"><span class="comment">&lt;!--引入vue.js文件--&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">script</span> <span class="attr">src</span>=<span class="string">"js/vue.js"</span>&gt;</span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">script</span>&gt;</span><span class="language-javascript"></span></span><br><span class="line"><span class="language-javascript">    <span class="keyword">var</span> app = <span class="keyword">new</span> <span class="title class_">Vue</span>({</span></span><br><span class="line"><span class="language-javascript">        <span class="attr">el</span>:<span class="string">"#app"</span>,  <span class="comment">//指定vue实例作用范围</span></span></span><br><span class="line"><span class="language-javascript">        <span class="attr">data</span>:{      <span class="comment">//用来给vue实例绑定一系列数据</span></span></span><br><span class="line"><span class="language-javascript">            <span class="attr">msg</span>:<span class="string">"hello vue"</span>,</span></span><br><span class="line"><span class="language-javascript">            <span class="attr">imgSrc</span>:<span class="string">"https://img0.baidu.com/it/u=384452397,1089369801&amp;fm=26&amp;fmt=auto&amp;gp=0.jpg"</span>,</span></span><br><span class="line"><span class="language-javascript">            <span class="attr">width</span>:<span class="number">200</span>,</span></span><br><span class="line"><span class="language-javascript">            <span class="attr">tip</span>:<span class="string">"这是图片"</span></span></span><br><span class="line"><span class="language-javascript">        },</span></span><br><span class="line"><span class="language-javascript">        <span class="attr">methods</span>:{ <span class="comment">//用来给vue实例定义事件处理函数</span></span></span><br><span class="line"><span class="language-javascript"></span></span><br><span class="line"><span class="language-javascript">        }</span></span><br><span class="line"><span class="language-javascript">    });</span></span><br><span class="line"><span class="language-javascript"></span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br></pre></td></tr></tbody></table></figure>

<h3 id="5-4、v-bind-简化写法"><a href="#5-4、v-bind-简化写法" class="headerlink" title="5.4、v-bind 简化写法"></a>5.4、v-bind 简化写法</h3><blockquote>
<p>​	vue为了方便我们日后绑定标签的属性提供了对属性绑定的简化写法如 <code>v-bind:属性名</code> 简化之后 <code>:属性名</code></p>
</blockquote>
<figure class="highlight plaintext"><table><tbody><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line">&lt;!--</span><br><span class="line">	v-bind: 绑定 作用：用来将html标签中相关属性绑定到vue实例中，日后通过对vue实例中数据修改，影响到对应标签中属性变化</span><br><span class="line">	语法：v-bind:属性名   =====&gt; 简化写法：属性名</span><br><span class="line">--&gt;</span><br><span class="line">&lt;img :width="width" :src="imgSrc" :alt="tip"&gt;</span><br></pre></td></tr></tbody></table></figure>

<blockquote>
<p>扩展v-bind使用</p>
</blockquote>
<figure class="highlight plaintext"><table><tbody><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br></pre></td><td class="code"><pre><span class="line">&lt;!DOCTYPE html&gt;</span><br><span class="line">&lt;html lang="en"&gt;</span><br><span class="line">&lt;head&gt;</span><br><span class="line">    &lt;meta charset="UTF-8"&gt;</span><br><span class="line">    &lt;title&gt;vue系列课程&lt;/title&gt;</span><br><span class="line">    &lt;style&gt;</span><br><span class="line">        .aa{</span><br><span class="line">            border: 5px red solid;</span><br><span class="line">        }</span><br><span class="line">        .bb{</span><br><span class="line">            border: 5px darkorange solid;</span><br><span class="line">        }</span><br><span class="line">    &lt;/style&gt;</span><br><span class="line">&lt;/head&gt;</span><br><span class="line">&lt;body &gt;</span><br><span class="line">    &lt;div id="app" &gt;</span><br><span class="line"></span><br><span class="line">        &lt;h2&gt;{{msg}}&lt;/h2&gt;</span><br><span class="line"></span><br><span class="line">       &lt;!--</span><br><span class="line">            v-bind: 绑定 作用：用来将html标签中相关属性绑定到vue实例中，日后通过对vue实例中数据修改，影响到对应标签中属性变化</span><br><span class="line">                        语法：v-bind:属性名   =====&gt; 简化写法：属性名</span><br><span class="line">        --&gt;</span><br><span class="line">        &lt;img :width="width" :src="imgSrc" :alt="tip" :class="isClass?'aa':'bb'"&gt;</span><br><span class="line">    &lt;/div&gt;</span><br><span class="line">&lt;/body&gt;</span><br><span class="line">&lt;/html&gt;</span><br><span class="line">&lt;!--引入vue.js文件--&gt;</span><br><span class="line">&lt;script src="js/vue.js"&gt;&lt;/script&gt;</span><br><span class="line">&lt;script&gt;</span><br><span class="line">    var app = new Vue({</span><br><span class="line">        el:"#app",  //指定vue实例作用范围</span><br><span class="line">        data:{      //用来给vue实例绑定一系列数据</span><br><span class="line">            msg:"hello vue",</span><br><span class="line">            imgSrc:"https://img0.baidu.com/it/u=384452397,1089369801&amp;fm=26&amp;fmt=auto&amp;gp=0.jpg",</span><br><span class="line">            width:200,</span><br><span class="line">            tip:"这是图片",</span><br><span class="line">            isClass:true,  //ture 显示red false 显示orange</span><br><span class="line">        },</span><br><span class="line">        methods:{ //用来给vue实例定义事件处理函数</span><br><span class="line"></span><br><span class="line">        }</span><br><span class="line">    });</span><br><span class="line">&lt;/script&gt;</span><br></pre></td></tr></tbody></table></figure>

<h3 id="5-5、v-bind案例"><a href="#5-5、v-bind案例" class="headerlink" title="5.5、v-bind案例"></a>5.5、v-bind案例</h3><p>实现鼠标移入和移出对图片和边框的切换。</p>
<figure class="highlight plaintext"><table><tbody><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br></pre></td><td class="code"><pre><span class="line">&lt;!DOCTYPE html&gt;</span><br><span class="line">&lt;html lang="en"&gt;</span><br><span class="line">&lt;head&gt;</span><br><span class="line">    &lt;meta charset="UTF-8"&gt;</span><br><span class="line">    &lt;title&gt;vue系列课程&lt;/title&gt;</span><br><span class="line">    &lt;style&gt;</span><br><span class="line">        .aa{</span><br><span class="line">            border: 5px red solid;</span><br><span class="line">        }</span><br><span class="line">        .bb{</span><br><span class="line">            border: 5px darkorange solid;</span><br><span class="line">        }</span><br><span class="line">    &lt;/style&gt;</span><br><span class="line">&lt;/head&gt;</span><br><span class="line">&lt;body &gt;</span><br><span class="line">    &lt;div id="app" &gt;</span><br><span class="line"></span><br><span class="line">        &lt;h2&gt;{{msg}}&lt;/h2&gt;</span><br><span class="line">        &lt;!--属性绑定--&gt;</span><br><span class="line">        &lt;img width="200" @mou="change" :src="src" :class="cls" @mouseover="change" @mouseout="recover"&gt;</span><br><span class="line">    &lt;/div&gt;</span><br><span class="line">&lt;/body&gt;</span><br><span class="line">&lt;/html&gt;</span><br><span class="line">&lt;!--引入vue.js文件--&gt;</span><br><span class="line">&lt;script src="js/vue.js"&gt;&lt;/script&gt;</span><br><span class="line">&lt;script&gt;</span><br><span class="line">    var app = new Vue({</span><br><span class="line">        el:"#app",  //指定vue实例作用范围</span><br><span class="line">        data:{      //用来给vue实例绑定一系列数据</span><br><span class="line">            msg:"hello vue",</span><br><span class="line">            src:"https://img2.baidu.com/it/u=1077360284,2857506492&amp;fm=26&amp;fmt=auto&amp;gp=0.jpg",</span><br><span class="line">            cls:"aa"</span><br><span class="line">        },</span><br><span class="line">        methods:{ //用来给vue实例定义事件处理函数</span><br><span class="line">            change(){</span><br><span class="line">                this.src = "https://img1.baidu.com/it/u=3229045480,3780302107&amp;fm=26&amp;fmt=auto&amp;gp=0.jpg";</span><br><span class="line">                this.cls = "bb";</span><br><span class="line">            },</span><br><span class="line">            recover(){</span><br><span class="line">                this.src = "https://img2.baidu.com/it/u=1077360284,2857506492&amp;fm=26&amp;fmt=auto&amp;gp=0.jpg";</span><br><span class="line">                this.cls = "aa";</span><br><span class="line">            }</span><br><span class="line">        }</span><br><span class="line">    });</span><br><span class="line">&lt;/script&gt;</span><br></pre></td></tr></tbody></table></figure>

<h2 id="6、v-for的使用"><a href="#6、v-for的使用" class="headerlink" title="6、v-for的使用"></a>6、v-for的使用</h2><blockquote>
<p><code>v-for</code>: 作用就是用来对对象进行遍历的(数组也是对象的一种)</p>
</blockquote>
<figure class="highlight html"><table><tbody><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br></pre></td><td class="code"><pre><span class="line"><span class="meta">&lt;!DOCTYPE <span class="keyword">html</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">html</span> <span class="attr">lang</span>=<span class="string">"en"</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">head</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">meta</span> <span class="attr">charset</span>=<span class="string">"UTF-8"</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">title</span>&gt;</span>vue系列课程<span class="tag">&lt;/<span class="name">title</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">head</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">body</span> &gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">div</span> <span class="attr">id</span>=<span class="string">"app"</span> &gt;</span></span><br><span class="line"></span><br><span class="line">        <span class="tag">&lt;<span class="name">h2</span>&gt;</span>{{msg}}<span class="tag">&lt;/<span class="name">h2</span>&gt;</span></span><br><span class="line"></span><br><span class="line">        <span class="comment">&lt;!--</span></span><br><span class="line"><span class="comment">            v-for : 作用：用来给vue实例中数据进行遍历</span></span><br><span class="line"><span class="comment">        --&gt;</span></span><br><span class="line">        <span class="tag">&lt;<span class="name">h1</span>&gt;</span>遍历对象<span class="tag">&lt;/<span class="name">h1</span>&gt;</span></span><br><span class="line">        <span class="tag">&lt;<span class="name">h2</span> <span class="attr">v-for</span>=<span class="string">"(value,key,index) in user"</span>&gt;</span></span><br><span class="line">            index: {{index}} key:{{key}} value:{{value}}</span><br><span class="line">        <span class="tag">&lt;/<span class="name">h2</span>&gt;</span></span><br><span class="line"></span><br><span class="line">        <span class="tag">&lt;<span class="name">h1</span>&gt;</span>遍历数组<span class="tag">&lt;/<span class="name">h1</span>&gt;</span></span><br><span class="line">        <span class="tag">&lt;<span class="name">h2</span> <span class="attr">v-for</span>=<span class="string">"(school,index) in schools"</span>&gt;</span></span><br><span class="line">            index:{{index}}  schools:{{school}}</span><br><span class="line">        <span class="tag">&lt;/<span class="name">h2</span>&gt;</span></span><br><span class="line"></span><br><span class="line">        <span class="tag">&lt;<span class="name">h1</span>&gt;</span>遍历数组中含有对象<span class="tag">&lt;/<span class="name">h1</span>&gt;</span></span><br><span class="line">        <span class="tag">&lt;<span class="name">h2</span> <span class="attr">v-for</span>=<span class="string">"(user,index) in users"</span> <span class="attr">:key</span> = <span class="string">"user.id"</span>&gt;</span></span><br><span class="line">            index: {{index}} name:{{user.name}} age:{{user.age}} bir:{{user.bir}}</span><br><span class="line">        <span class="tag">&lt;/<span class="name">h2</span>&gt;</span></span><br><span class="line"></span><br><span class="line">    <span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">body</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">html</span>&gt;</span></span><br><span class="line"><span class="comment">&lt;!--引入vue.js文件--&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">script</span> <span class="attr">src</span>=<span class="string">"js/vue.js"</span>&gt;</span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">script</span>&gt;</span><span class="language-javascript"></span></span><br><span class="line"><span class="language-javascript">    <span class="keyword">var</span> app = <span class="keyword">new</span> <span class="title class_">Vue</span>({</span></span><br><span class="line"><span class="language-javascript">        <span class="attr">el</span>:<span class="string">"#app"</span>,  <span class="comment">//指定vue实例作用范围</span></span></span><br><span class="line"><span class="language-javascript">        <span class="attr">data</span>:{      <span class="comment">//用来给vue实例绑定一系列数据</span></span></span><br><span class="line"><span class="language-javascript">            <span class="attr">msg</span>:<span class="string">"hello vue"</span>,</span></span><br><span class="line"><span class="language-javascript">            <span class="attr">user</span>:{<span class="attr">name</span>:<span class="string">"小王"</span>,<span class="attr">age</span>:<span class="number">23</span>,<span class="attr">bir</span>:<span class="string">"2012-02-06"</span>},</span></span><br><span class="line"><span class="language-javascript">            <span class="attr">schools</span>:[<span class="string">"北京"</span>,<span class="string">"重庆"</span>,<span class="string">"天津"</span>],</span></span><br><span class="line"><span class="language-javascript">            <span class="attr">users</span>:[</span></span><br><span class="line"><span class="language-javascript">                {<span class="attr">id</span>:<span class="string">"1"</span>,<span class="attr">name</span>:<span class="string">"小王"</span>,<span class="attr">age</span>:<span class="number">23</span>,<span class="attr">bir</span>:<span class="string">"2012-02-06"</span>},</span></span><br><span class="line"><span class="language-javascript">                {<span class="attr">id</span>:<span class="string">"2"</span>,<span class="attr">name</span>:<span class="string">"小李"</span>,<span class="attr">age</span>:<span class="number">34</span>,<span class="attr">bir</span>:<span class="string">"2016-02-06"</span>},</span></span><br><span class="line"><span class="language-javascript">                {<span class="attr">id</span>:<span class="string">"3"</span>,<span class="attr">name</span>:<span class="string">"小赵"</span>,<span class="attr">age</span>:<span class="number">12</span>,<span class="attr">bir</span>:<span class="string">"2014-02-06"</span>},</span></span><br><span class="line"><span class="language-javascript">            ]</span></span><br><span class="line"><span class="language-javascript">        },</span></span><br><span class="line"><span class="language-javascript">        <span class="attr">methods</span>:{ <span class="comment">//用来给vue实例定义事件处理函数</span></span></span><br><span class="line"><span class="language-javascript"></span></span><br><span class="line"><span class="language-javascript">        }</span></span><br><span class="line"><span class="language-javascript">    });</span></span><br><span class="line"><span class="language-javascript"></span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br></pre></td></tr></tbody></table></figure>

<figure class="highlight markdown"><table><tbody><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line"><span class="section"># 总结</span></span><br><span class="line"><span class="code">	1.在使用v-for的时候一定要注意加入:key 用来给vue内部提供重用和排序的唯一key </span></span><br></pre></td></tr></tbody></table></figure>

<hr>
<h2 id="7、v-model-双向绑定"><a href="#7、v-model-双向绑定" class="headerlink" title="7、v-model 双向绑定"></a>7、v-model 双向绑定</h2><h3 id="7-1、v-model"><a href="#7-1、v-model" class="headerlink" title="7.1、v-model"></a>7.1、v-model</h3><blockquote>
<p><code>v-model</code>: 作用用来绑定标签元素的值与vue实例对象中data数据保持一致,从而实现双向的数据绑定机制</p>
</blockquote>
<p><strong>代码：</strong></p>
<figure class="highlight html"><table><tbody><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br></pre></td><td class="code"><pre><span class="line"><span class="meta">&lt;!DOCTYPE <span class="keyword">html</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">html</span> <span class="attr">lang</span>=<span class="string">"en"</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">head</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">meta</span> <span class="attr">charset</span>=<span class="string">"UTF-8"</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">title</span>&gt;</span>vue系列课程<span class="tag">&lt;/<span class="name">title</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">head</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">body</span> &gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">div</span> <span class="attr">id</span>=<span class="string">"app"</span> &gt;</span></span><br><span class="line"></span><br><span class="line">        <span class="tag">&lt;<span class="name">h2</span>&gt;</span>{{msg}}<span class="tag">&lt;/<span class="name">h2</span>&gt;</span></span><br><span class="line"></span><br><span class="line">        <span class="comment">&lt;!--</span></span><br><span class="line"><span class="comment">            v-model : 作用：用来绑定from表单标签中的value属性交给vue实例进行管理 input select checxbox button ...</span></span><br><span class="line"><span class="comment">        --&gt;</span></span><br><span class="line">        <span class="tag">&lt;<span class="name">input</span> <span class="attr">type</span>=<span class="string">"text"</span> <span class="attr">v-model</span>=<span class="string">"msg"</span>&gt;</span></span><br><span class="line"></span><br><span class="line">        <span class="tag">&lt;<span class="name">input</span> <span class="attr">type</span>=<span class="string">"button"</span> <span class="attr">value</span>=<span class="string">"改变data数据"</span> @<span class="attr">click</span>=<span class="string">"change"</span>&gt;</span></span><br><span class="line"></span><br><span class="line">    <span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">body</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">html</span>&gt;</span></span><br><span class="line"><span class="comment">&lt;!--引入vue.js文件--&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">script</span> <span class="attr">src</span>=<span class="string">"js/vue.js"</span>&gt;</span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">script</span>&gt;</span><span class="language-javascript"></span></span><br><span class="line"><span class="language-javascript">    <span class="keyword">var</span> app = <span class="keyword">new</span> <span class="title class_">Vue</span>({</span></span><br><span class="line"><span class="language-javascript">        <span class="attr">el</span>:<span class="string">"#app"</span>,  <span class="comment">//指定vue实例作用范围</span></span></span><br><span class="line"><span class="language-javascript">        <span class="attr">data</span>:{      <span class="comment">//用来给vue实例绑定一系列数据</span></span></span><br><span class="line"><span class="language-javascript">            <span class="attr">msg</span>:<span class="string">"hello vue"</span>,</span></span><br><span class="line"><span class="language-javascript"></span></span><br><span class="line"><span class="language-javascript">        },</span></span><br><span class="line"><span class="language-javascript">        <span class="attr">methods</span>:{ <span class="comment">//用来给vue实例定义事件处理函数</span></span></span><br><span class="line"><span class="language-javascript">            <span class="title function_">change</span>(<span class="params"></span>){</span></span><br><span class="line"><span class="language-javascript">                <span class="variable language_">this</span>.<span class="property">msg</span> = <span class="string">"vue学习"</span></span></span><br><span class="line"><span class="language-javascript">            }</span></span><br><span class="line"><span class="language-javascript">        }</span></span><br><span class="line"><span class="language-javascript">    });</span></span><br><span class="line"><span class="language-javascript"></span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br></pre></td></tr></tbody></table></figure>

<p><strong>总结：</strong> </p>
<figure class="highlight markdown"><table><tbody><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br></pre></td><td class="code"><pre><span class="line"><span class="section"># 总结</span></span><br><span class="line"><span class="code">		1.使用v-model指令可以实现数据的双向绑定 </span></span><br><span class="line"><span class="code">		2.所谓双向绑定 表单中数据变化导致vue实例data数据变化   vue实例中data数据的变化导致表单中数据变化 称之为双向绑定</span></span><br><span class="line"><span class="code"></span></span><br><span class="line"><span class="section"># MVVM架构  双向绑定机制</span></span><br><span class="line"><span class="code">	Model: 数据  Vue实例中绑定数据</span></span><br><span class="line"><span class="code">	</span></span><br><span class="line"><span class="code">	VM:   ViewModel  监听器</span></span><br><span class="line"><span class="code"></span></span><br><span class="line"><span class="code">	View:  页面  页面展示的数据</span></span><br></pre></td></tr></tbody></table></figure>



<h2 id="8、计算属性"><a href="#8、计算属性" class="headerlink" title="8、计算属性"></a>8、计算属性</h2><blockquote>
<p>计算属性：computed: vue官方提供一个计算属性</p>
</blockquote>
<p><strong>代码：</strong></p>
<figure class="highlight plaintext"><table><tbody><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br><span class="line">58</span><br><span class="line">59</span><br><span class="line">60</span><br><span class="line">61</span><br><span class="line">62</span><br><span class="line">63</span><br><span class="line">64</span><br><span class="line">65</span><br><span class="line">66</span><br><span class="line">67</span><br><span class="line">68</span><br><span class="line">69</span><br><span class="line">70</span><br><span class="line">71</span><br><span class="line">72</span><br><span class="line">73</span><br><span class="line">74</span><br><span class="line">75</span><br><span class="line">76</span><br><span class="line">77</span><br><span class="line">78</span><br><span class="line">79</span><br><span class="line">80</span><br><span class="line">81</span><br><span class="line">82</span><br></pre></td><td class="code"><pre><span class="line">&lt;!DOCTYPE html&gt;</span><br><span class="line">&lt;html lang="en"&gt;</span><br><span class="line">&lt;head&gt;</span><br><span class="line">    &lt;meta charset="UTF-8"&gt;</span><br><span class="line">    &lt;title&gt;vue系列课程&lt;/title&gt;</span><br><span class="line">&lt;/head&gt;</span><br><span class="line">&lt;body&gt;</span><br><span class="line">    &lt;div id="app"&gt;</span><br><span class="line">        &lt;h1&gt;{{msg}}&lt;/h1&gt;</span><br><span class="line"></span><br><span class="line">        &lt;!--</span><br><span class="line">            computed: vue官方提供一个计算属性</span><br><span class="line">                作用：在完成某种业务时，往往页面结果需要经过多次计算才能获取，computed属性就是用来完成页面结果多次计算</span><br><span class="line">                好处：在完成计算同时也会将本次计算结果进行缓存，如果数据没有发生变化，在页面中多次使用，计算方法仅执行一次</span><br><span class="line">                使用：{{ 属性名}} 属性名即方法名称</span><br><span class="line">        --&gt;</span><br><span class="line">        &lt;table border="1"&gt;</span><br><span class="line">            &lt;tr&gt;</span><br><span class="line">                &lt;th&gt;id&lt;/th&gt;</span><br><span class="line">                &lt;th&gt;名称&lt;/th&gt;</span><br><span class="line">                &lt;th&gt;价格&lt;/th&gt;</span><br><span class="line">                &lt;th&gt;数量&lt;/th&gt;</span><br><span class="line">                &lt;th&gt;小计&lt;/th&gt;</span><br><span class="line">            &lt;/tr&gt;</span><br><span class="line">            &lt;!--v-for--&gt;</span><br><span class="line">            &lt;tr v-for="(item,index) in items" :key="item.id"&gt;</span><br><span class="line">                &lt;td&gt;{{item.id}}&lt;/td&gt;</span><br><span class="line">                &lt;td&gt;{{item.name}}&lt;/td&gt;</span><br><span class="line">                &lt;td&gt;{{item.price}}&lt;/td&gt;</span><br><span class="line">                &lt;td&gt;&lt;input type="button" value="-" @click="decrCount(index)"&gt;{{item.count}}&lt;input type="button" value="+" @click="incrCount(index)"&gt;&lt;/td&gt;</span><br><span class="line">                &lt;td&gt;{{(item.price * item.count).toFixed(2)}}&lt;/td&gt;</span><br><span class="line">            &lt;/tr&gt;</span><br><span class="line">        &lt;/table&gt;</span><br><span class="line"></span><br><span class="line">        &lt;!--使用methods方法完成计算业务：</span><br><span class="line">            缺点：</span><br><span class="line">                1.只要调用了一次计算方法，整个计算方法就会执行一次，如果在一个页面中多次使用到计算结果，可能会导致造成重复计算，导致页面加载性能变低</span><br><span class="line">        --&gt;</span><br><span class="line">        &lt;h3&gt;总价格：{{totalPrice}}&lt;/h3&gt;</span><br><span class="line"></span><br><span class="line">    &lt;/div&gt;</span><br><span class="line">&lt;/body&gt;</span><br><span class="line">&lt;/html&gt;</span><br><span class="line">&lt;!--引入vue的js文件--&gt;</span><br><span class="line">&lt;script src="js/vue.js"&gt;&lt;/script&gt;</span><br><span class="line">&lt;script&gt;</span><br><span class="line">    var app = new Vue({</span><br><span class="line">        el:"#app",  //代表vue实例作用范围</span><br><span class="line">        data:{      //在vue实例中定义一系列数据</span><br><span class="line">            msg:"购物车功能实现之methods方法实现总价格",</span><br><span class="line">            items:[</span><br><span class="line">                {id:1,name:"苹果iphone12",count:1,price:28.28},</span><br><span class="line">                {id:2,name:"华为mate40 pro",count:1,price:30.28},</span><br><span class="line">            ]</span><br><span class="line">        },</span><br><span class="line">        methods:{ //在vue实例中定义相关函数</span><br><span class="line">            incrCount(index){  //数量增加的方法</span><br><span class="line">                console.log(this.items[index].count);</span><br><span class="line">                this.items[index].count++;</span><br><span class="line">            },</span><br><span class="line">            decrCount(index){  //数量减少的方法</span><br><span class="line">                console.log(this.items[index].count);</span><br><span class="line">                if( this.items[index].count &gt;= 1){</span><br><span class="line">                    this.items[index].count--;</span><br><span class="line">                }else{</span><br><span class="line">                    alert("不能在少了!");</span><br><span class="line">                    return ;</span><br><span class="line">                }</span><br><span class="line">            },</span><br><span class="line"></span><br><span class="line">        },</span><br><span class="line">        computed:{  //用来书写计算相关方法  计算属性</span><br><span class="line">            totalPrice(){ //计算方法 好处：只进行一次计算，多次使用时直接使用第一次计算之后缓存结果</span><br><span class="line">                var totalPrice = 0;</span><br><span class="line">                for(var i = 0; i &lt; this.items.length; i++){</span><br><span class="line">                    totalPrice += this.items[i].count * this.items[i].price;</span><br><span class="line">                }</span><br><span class="line">                return totalPrice.toFixed(2);</span><br><span class="line">            }</span><br><span class="line">        }</span><br><span class="line">    });</span><br><span class="line">&lt;/script&gt;</span><br></pre></td></tr></tbody></table></figure>

<p><strong>总结：</strong></p>
<ol>
<li>作用：在完成某种业务时，往往页面结果需要经过多次计算才能获取，computed属性就是用来完成页面结果多次计算</li>
<li>好处：在完成计算同时也会将本次计算结果进行缓存，如果数据没有发生变化，在页面中多次使用，计算方法仅执行一次</li>
<li>使用： 属性名即方法名称</li>
</ol>
<h2 id="9、事件修饰符"><a href="#9、事件修饰符" class="headerlink" title="9、事件修饰符"></a>9、事件修饰符</h2><blockquote>
<p><code>修饰符</code>: 用来和事件连用,用来决定事件触发条件或者是阻止事件的触发机制</p>
</blockquote>
<figure class="highlight markdown"><table><tbody><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line"><span class="section"># 1.常用的事件修饰符</span></span><br><span class="line"><span class="code">	.stop    停止</span></span><br><span class="line"><span class="code">	.prevent 阻止</span></span><br><span class="line"><span class="code">	.self    独自</span></span><br><span class="line"><span class="code">	.once    一次</span></span><br><span class="line"><span class="code">	</span></span><br></pre></td></tr></tbody></table></figure>

<h3 id="9-1-stop事件修饰符"><a href="#9-1-stop事件修饰符" class="headerlink" title="9.1 stop事件修饰符"></a>9.1 stop事件修饰符</h3><blockquote>
<p>用来阻止事件冒泡</p>
</blockquote>
<figure class="highlight html"><table><tbody><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">h2</span>&gt;</span>stop事件修饰符<span class="tag">&lt;/<span class="name">h2</span>&gt;</span></span><br><span class="line"><span class="comment">&lt;!--.stop 事件修饰符 作用：用来阻止事件的冒泡--&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">div</span> <span class="attr">style</span>=<span class="string">"width: 200px;height: 200px;background: red"</span> @<span class="attr">click</span>=<span class="string">"parent"</span>&gt;</span></span><br><span class="line"></span><br><span class="line">    <span class="comment">&lt;!--对孩子中单击事件进行修饰：不进行事件冒泡处理 .stop--&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">div</span> <span class="attr">style</span>=<span class="string">"width: 100px;height: 100px;background: green"</span> @<span class="attr">click.stop</span>=<span class="string">"child"</span>&gt;</span><span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line"></span><br><span class="line"><span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br></pre></td></tr></tbody></table></figure>

<h3 id="9-2-prevent-事件修饰符"><a href="#9-2-prevent-事件修饰符" class="headerlink" title="9.2 prevent 事件修饰符"></a>9.2 prevent 事件修饰符</h3><blockquote>
<p>用来阻止标签的默认行为</p>
</blockquote>
<figure class="highlight html"><table><tbody><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">h2</span>&gt;</span>prevent事件修饰符<span class="tag">&lt;/<span class="name">h2</span>&gt;</span></span><br><span class="line"><span class="comment">&lt;!--默认行为：根据href连接自动跳转 .prevent 阻止事件默认行为--&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">a</span> <span class="attr">href</span>=<span class="string">"http://www.baidu.com"</span> @<span class="attr">click.prevent</span>=<span class="string">"search"</span>&gt;</span>百度一下<span class="tag">&lt;/<span class="name">a</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">a</span> <span class="attr">href</span>=<span class="string">"javascript:void(0);"</span> @<span class="attr">click.prevent</span>=<span class="string">"search"</span>&gt;</span>百度一下<span class="tag">&lt;/<span class="name">a</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">a</span> <span class="attr">href</span>=<span class="string">"javascript:;"</span> @<span class="attr">click.prevent</span>=<span class="string">"search"</span>&gt;</span>百度一下<span class="tag">&lt;/<span class="name">a</span>&gt;</span></span><br></pre></td></tr></tbody></table></figure>

<h3 id="9-3-self-事件修饰符"><a href="#9-3-self-事件修饰符" class="headerlink" title="9.3 self 事件修饰符"></a>9.3 self 事件修饰符</h3><blockquote>
<p>用来针对于当前标签的事件触发     ===========&gt; 只触发自己标签的上特定动作的事件     只关心自己标签上触发的事件 不监听事件冒泡</p>
</blockquote>
<figure class="highlight html"><table><tbody><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">h2</span>&gt;</span>slef事件修饰符<span class="tag">&lt;/<span class="name">h2</span>&gt;</span></span><br><span class="line"><span class="comment">&lt;!--self: 只监听自身标签触发的对应事件--&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">div</span> <span class="attr">style</span>=<span class="string">"width: 200px;height: 200px;background: aqua"</span> @<span class="attr">click.self</span>=<span class="string">"parent"</span>&gt;</span></span><br><span class="line"></span><br><span class="line">    <span class="tag">&lt;<span class="name">div</span> <span class="attr">style</span>=<span class="string">"width: 100px;height: 100px;background: green"</span> @<span class="attr">click</span>=<span class="string">"child"</span>&gt;</span><span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">div</span> <span class="attr">style</span>=<span class="string">"width: 100px;height: 100px;background: brown"</span> @<span class="attr">click</span>=<span class="string">"child"</span>&gt;</span><span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line"></span><br><span class="line"><span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br></pre></td></tr></tbody></table></figure>

<h3 id="9-4-once-事件修饰符"><a href="#9-4-once-事件修饰符" class="headerlink" title="9.4 once 事件修饰符"></a>9.4 once 事件修饰符</h3><blockquote>
<p>once 一次作用:  就是让指定事件只触发一次</p>
</blockquote>
<figure class="highlight html"><table><tbody><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br><span class="line">58</span><br><span class="line">59</span><br><span class="line">60</span><br><span class="line">61</span><br><span class="line">62</span><br><span class="line">63</span><br><span class="line">64</span><br><span class="line">65</span><br><span class="line">66</span><br><span class="line">67</span><br><span class="line">68</span><br><span class="line">69</span><br><span class="line">70</span><br><span class="line">71</span><br><span class="line">72</span><br><span class="line">73</span><br><span class="line">74</span><br><span class="line">75</span><br><span class="line">76</span><br><span class="line">77</span><br><span class="line">78</span><br></pre></td><td class="code"><pre><span class="line"><span class="meta">&lt;!DOCTYPE <span class="keyword">html</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">html</span> <span class="attr">lang</span>=<span class="string">"en"</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">head</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">meta</span> <span class="attr">charset</span>=<span class="string">"UTF-8"</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">title</span>&gt;</span>vue系列课程<span class="tag">&lt;/<span class="name">title</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">head</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">body</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">div</span> <span class="attr">id</span>=<span class="string">"app"</span>&gt;</span></span><br><span class="line"></span><br><span class="line">        <span class="tag">&lt;<span class="name">h1</span>&gt;</span>{{msg}}<span class="tag">&lt;/<span class="name">h1</span>&gt;</span></span><br><span class="line"></span><br><span class="line">        <span class="comment">&lt;!--</span></span><br><span class="line"><span class="comment">            事件修饰符 作用：用来和事件连用，用来决定事件触发条件和决定事件触发机制</span></span><br><span class="line"><span class="comment">            .stop       停止事件冒泡</span></span><br><span class="line"><span class="comment">            .prevent    阻止默认行为</span></span><br><span class="line"><span class="comment">            .slef       只触发自身行为</span></span><br><span class="line"><span class="comment">            .once       一次事件</span></span><br><span class="line"><span class="comment"></span></span><br><span class="line"><span class="comment">            注意：事件修饰符可以多个连用</span></span><br><span class="line"><span class="comment">         --&gt;</span></span><br><span class="line">        <span class="tag">&lt;<span class="name">h2</span>&gt;</span>stop事件修饰符<span class="tag">&lt;/<span class="name">h2</span>&gt;</span></span><br><span class="line">         <span class="comment">&lt;!--.stop 事件修饰符 作用：用来阻止事件的冒泡--&gt;</span></span><br><span class="line">         <span class="tag">&lt;<span class="name">div</span> <span class="attr">style</span>=<span class="string">"width: 200px;height: 200px;background: red"</span> @<span class="attr">click</span>=<span class="string">"parent"</span>&gt;</span></span><br><span class="line"></span><br><span class="line">             <span class="comment">&lt;!--对孩子中单击事件进行修饰：不进行事件冒泡处理 .stop--&gt;</span></span><br><span class="line">             <span class="tag">&lt;<span class="name">div</span> <span class="attr">style</span>=<span class="string">"width: 100px;height: 100px;background: green"</span> @<span class="attr">click.stop.once</span>=<span class="string">"child"</span>&gt;</span><span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line"></span><br><span class="line">         <span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line"></span><br><span class="line">        <span class="tag">&lt;<span class="name">h2</span>&gt;</span>prevent事件修饰符<span class="tag">&lt;/<span class="name">h2</span>&gt;</span></span><br><span class="line">        <span class="comment">&lt;!--默认行为：根据href连接自动跳转 .prevent 阻止事件默认行为--&gt;</span></span><br><span class="line">        <span class="tag">&lt;<span class="name">a</span> <span class="attr">href</span>=<span class="string">"http://www.baidu.com"</span> @<span class="attr">click.prevent</span>=<span class="string">"search"</span>&gt;</span>百度一下<span class="tag">&lt;/<span class="name">a</span>&gt;</span></span><br><span class="line">        <span class="tag">&lt;<span class="name">a</span> <span class="attr">href</span>=<span class="string">"javascript:void(0);"</span> @<span class="attr">click.prevent</span>=<span class="string">"search"</span>&gt;</span>百度一下<span class="tag">&lt;/<span class="name">a</span>&gt;</span></span><br><span class="line">        <span class="tag">&lt;<span class="name">a</span> <span class="attr">href</span>=<span class="string">"javascript:;"</span> @<span class="attr">click.prevent</span>=<span class="string">"search"</span>&gt;</span>百度一下<span class="tag">&lt;/<span class="name">a</span>&gt;</span></span><br><span class="line"></span><br><span class="line">        <span class="tag">&lt;<span class="name">h2</span>&gt;</span>slef事件修饰符<span class="tag">&lt;/<span class="name">h2</span>&gt;</span></span><br><span class="line">        <span class="comment">&lt;!--self: 只监听自身标签触发的对应事件--&gt;</span></span><br><span class="line">        <span class="tag">&lt;<span class="name">div</span> <span class="attr">style</span>=<span class="string">"width: 200px;height: 200px;background: aqua"</span> @<span class="attr">click.self</span>=<span class="string">"parent"</span>&gt;</span></span><br><span class="line"></span><br><span class="line">            <span class="tag">&lt;<span class="name">div</span> <span class="attr">style</span>=<span class="string">"width: 100px;height: 100px;background: green"</span> @<span class="attr">click</span>=<span class="string">"child"</span>&gt;</span><span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line">            <span class="tag">&lt;<span class="name">div</span> <span class="attr">style</span>=<span class="string">"width: 100px;height: 100px;background: brown"</span> @<span class="attr">click</span>=<span class="string">"child"</span>&gt;</span><span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line"></span><br><span class="line">        <span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line"></span><br><span class="line">        <span class="tag">&lt;<span class="name">h2</span>&gt;</span>once事件修饰符<span class="tag">&lt;/<span class="name">h2</span>&gt;</span></span><br><span class="line">        <span class="comment">&lt;!--once事件修饰符：作用：只能让标签上的对应事件执行一次--&gt;</span></span><br><span class="line">        <span class="tag">&lt;<span class="name">input</span> <span class="attr">type</span>=<span class="string">"button"</span> <span class="attr">value</span>=<span class="string">"点我"</span> @<span class="attr">click.once</span>=<span class="string">"clickMe"</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">body</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">html</span>&gt;</span></span><br><span class="line"><span class="comment">&lt;!--引入vue的js文件--&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">script</span> <span class="attr">src</span>=<span class="string">"js/vue.js"</span>&gt;</span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">script</span>&gt;</span><span class="language-javascript"></span></span><br><span class="line"><span class="language-javascript">    <span class="keyword">var</span> app = <span class="keyword">new</span> <span class="title class_">Vue</span>({</span></span><br><span class="line"><span class="language-javascript">        <span class="attr">el</span>:<span class="string">"#app"</span>,  <span class="comment">//代表vue实例作用范围</span></span></span><br><span class="line"><span class="language-javascript">        <span class="attr">data</span>:{      <span class="comment">//在vue实例中定义一系列数据</span></span></span><br><span class="line"><span class="language-javascript">            <span class="attr">msg</span>:<span class="string">"事件修饰符"</span>,</span></span><br><span class="line"><span class="language-javascript"></span></span><br><span class="line"><span class="language-javascript">        },</span></span><br><span class="line"><span class="language-javascript">        <span class="attr">methods</span>:{ <span class="comment">//在vue实例中定义相关函数</span></span></span><br><span class="line"><span class="language-javascript">            <span class="title function_">parent</span>(<span class="params"></span>){</span></span><br><span class="line"><span class="language-javascript">                <span class="title function_">alert</span>(<span class="string">"parent div event"</span>);</span></span><br><span class="line"><span class="language-javascript">            },</span></span><br><span class="line"><span class="language-javascript">            <span class="title function_">child</span>(<span class="params"></span>){</span></span><br><span class="line"><span class="language-javascript">                <span class="title function_">alert</span>(<span class="string">"child div event"</span>);</span></span><br><span class="line"><span class="language-javascript">            },</span></span><br><span class="line"><span class="language-javascript">            <span class="title function_">search</span>(<span class="params"></span>){</span></span><br><span class="line"><span class="language-javascript">                <span class="title function_">alert</span>(<span class="string">"a click event"</span>);</span></span><br><span class="line"><span class="language-javascript">            },</span></span><br><span class="line"><span class="language-javascript">            <span class="title function_">clickMe</span>(<span class="params"></span>){</span></span><br><span class="line"><span class="language-javascript">                <span class="title function_">alert</span>(<span class="string">"click me!!!"</span>)</span></span><br><span class="line"><span class="language-javascript">            }</span></span><br><span class="line"><span class="language-javascript">        },</span></span><br><span class="line"><span class="language-javascript">        <span class="attr">computed</span>:{  <span class="comment">//用来书写计算相关方法  计算属性</span></span></span><br><span class="line"><span class="language-javascript"></span></span><br><span class="line"><span class="language-javascript">        }</span></span><br><span class="line"><span class="language-javascript">    });</span></span><br><span class="line"><span class="language-javascript"></span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br></pre></td></tr></tbody></table></figure>

<hr>
<h2 id="10、按键修饰符"><a href="#10、按键修饰符" class="headerlink" title="10、按键修饰符"></a>10、按键修饰符</h2><blockquote>
<p>作用: 用来与键盘中按键事件绑定在一起,用来修饰特定的按键事件的修饰符</p>
</blockquote>
<figure class="highlight markdown"><table><tbody><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br></pre></td><td class="code"><pre><span class="line"><span class="section"># 按键修饰符</span></span><br><span class="line"><span class="code">	.enter</span></span><br><span class="line"><span class="code">	.tab</span></span><br><span class="line"><span class="code">	.delete (捕获“删除”和“退格”键)</span></span><br><span class="line"><span class="code">	.esc</span></span><br><span class="line"><span class="code">	.space</span></span><br><span class="line"><span class="code">	.up</span></span><br><span class="line"><span class="code">	.down</span></span><br><span class="line"><span class="code">	.left</span></span><br><span class="line"><span class="code">	.right</span></span><br></pre></td></tr></tbody></table></figure>

<h3 id="10-1-enter-回车键"><a href="#10-1-enter-回车键" class="headerlink" title="10.1 enter 回车键"></a>10.1 enter 回车键</h3><blockquote>
<p>用来在触发回车按键之后触发的事件</p>
</blockquote>
<figure class="highlight html"><table><tbody><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br></pre></td><td class="code"><pre><span class="line"><span class="meta">&lt;!DOCTYPE <span class="keyword">html</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">html</span> <span class="attr">lang</span>=<span class="string">"en"</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">head</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">meta</span> <span class="attr">charset</span>=<span class="string">"UTF-8"</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">title</span>&gt;</span>vue系列课程<span class="tag">&lt;/<span class="name">title</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">head</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">body</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">div</span> <span class="attr">id</span>=<span class="string">"app"</span>&gt;</span></span><br><span class="line"></span><br><span class="line">        <span class="tag">&lt;<span class="name">h1</span>&gt;</span>{{msg}}<span class="tag">&lt;/<span class="name">h1</span>&gt;</span></span><br><span class="line">        <span class="comment">&lt;!--</span></span><br><span class="line"><span class="comment">            按键修饰符：作用:用来和键盘上事件(keyup,keydown......)进行连用，用来修饰键盘上特定的按键来触发对应的事件</span></span><br><span class="line"><span class="comment">            .enter</span></span><br><span class="line"><span class="comment">            .tab</span></span><br><span class="line"><span class="comment">            .delete (捕获“删除”和“退格”键)</span></span><br><span class="line"><span class="comment">            .esc</span></span><br><span class="line"><span class="comment">            .space</span></span><br><span class="line"><span class="comment">            .up</span></span><br><span class="line"><span class="comment">            .down</span></span><br><span class="line"><span class="comment">            .left</span></span><br><span class="line"><span class="comment">            .right</span></span><br><span class="line"><span class="comment">        --&gt;</span></span><br><span class="line">        <span class="comment">&lt;!--.enter 回车按键修饰符--&gt;</span></span><br><span class="line">        <span class="tag">&lt;<span class="name">input</span> <span class="attr">type</span>=<span class="string">"text"</span> <span class="attr">v-model</span>=<span class="string">"msg"</span> @<span class="attr">keyup.enter</span>=<span class="string">"test"</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">body</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">html</span>&gt;</span></span><br><span class="line"><span class="comment">&lt;!--引入vue的js文件--&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">script</span> <span class="attr">src</span>=<span class="string">"js/vue.js"</span>&gt;</span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">script</span>&gt;</span><span class="language-javascript"></span></span><br><span class="line"><span class="language-javascript">    <span class="keyword">var</span> app = <span class="keyword">new</span> <span class="title class_">Vue</span>({</span></span><br><span class="line"><span class="language-javascript">        <span class="attr">el</span>:<span class="string">"#app"</span>,  <span class="comment">//代表vue实例作用范围</span></span></span><br><span class="line"><span class="language-javascript">        <span class="attr">data</span>:{      <span class="comment">//在vue实例中定义一系列数据</span></span></span><br><span class="line"><span class="language-javascript">            <span class="attr">msg</span>:<span class="string">"按键修饰符"</span>,</span></span><br><span class="line"><span class="language-javascript"></span></span><br><span class="line"><span class="language-javascript">        },</span></span><br><span class="line"><span class="language-javascript">        <span class="attr">methods</span>:{ <span class="comment">//在vue实例中定义相关函数</span></span></span><br><span class="line"><span class="language-javascript">            <span class="title function_">test</span>(<span class="params"></span>){</span></span><br><span class="line"><span class="language-javascript">                <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="string">"test"</span>);</span></span><br><span class="line"><span class="language-javascript">            }</span></span><br><span class="line"><span class="language-javascript">        },</span></span><br><span class="line"><span class="language-javascript">        <span class="attr">computed</span>:{  <span class="comment">//用来书写计算相关方法  计算属性</span></span></span><br><span class="line"><span class="language-javascript"></span></span><br><span class="line"><span class="language-javascript">        }</span></span><br><span class="line"><span class="language-javascript">    });</span></span><br><span class="line"><span class="language-javascript"></span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br></pre></td></tr></tbody></table></figure>

<h3 id="10-2-tab-键"><a href="#10-2-tab-键" class="headerlink" title="10.2 tab 键"></a>10.2 tab 键</h3><blockquote>
<p>用来捕获到tab键执行到当前标签是才会触发</p>
</blockquote>
<figure class="highlight html"><table><tbody><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">input</span> <span class="attr">type</span>=<span class="string">"text"</span> @<span class="attr">keyup.tab</span>=<span class="string">"test"</span>&gt;</span></span><br></pre></td></tr></tbody></table></figure>

<hr>
<h2 id="11、Axios-基本使用"><a href="#11、Axios-基本使用" class="headerlink" title="11、Axios 基本使用"></a>11、Axios 基本使用</h2><h3 id="11-1、引言"><a href="#11-1、引言" class="headerlink" title="11.1、引言"></a>11.1、引言</h3><blockquote>
<p><code>Axios</code> 是一个异步请求技术,核心作用就是用来在页面中发送异步请求,并获取对应数据在页面中渲染       页面局部更新技术  Ajax</p>
</blockquote>
<h3 id="11-2、Axios-第一个程序"><a href="#11-2、Axios-第一个程序" class="headerlink" title="11.2、Axios 第一个程序"></a>11.2、Axios 第一个程序</h3><p>中文网站:<a target="_blank" rel="noopener" href="https://www.kancloud.cn/yunye/axios/234845">https://www.kancloud.cn/yunye/axios/234845</a></p>
<p>安装: <a target="_blank" rel="noopener" href="https://unpkg.com/axios/dist/axios.min.js">https://unpkg.com/axios/dist/axios.min.js</a></p>
<h4 id="11-2-1、GET方式的请求"><a href="#11-2-1、GET方式的请求" class="headerlink" title="11.2.1、GET方式的请求"></a>11.2.1、GET方式的请求</h4><p><strong>后端代码：</strong></p>
<figure class="highlight java"><table><tbody><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">package</span> com.xiao.controller;</span><br><span class="line"></span><br><span class="line"><span class="keyword">import</span> com.xiao.entity.User;</span><br><span class="line"><span class="keyword">import</span> org.springframework.web.bind.annotation.*;</span><br><span class="line"></span><br><span class="line"><span class="keyword">import</span> javax.websocket.server.PathParam;</span><br><span class="line"><span class="keyword">import</span> java.util.Date;</span><br><span class="line"></span><br><span class="line"><span class="meta">@RestController</span> <span class="comment">//代表接口中返回的都是json格式数据</span></span><br><span class="line"><span class="meta">@CrossOrigin</span> <span class="comment">//运行所有的请求 所有域访问 解决：跨域问题</span></span><br><span class="line"><span class="keyword">public</span> <span class="keyword">class</span> <span class="title class_">AdminController</span> {</span><br><span class="line"></span><br><span class="line">    <span class="comment">//user接口</span></span><br><span class="line"></span><br><span class="line">    <span class="comment">//rest接口 url/11/</span></span><br><span class="line">    <span class="meta">@GetMapping("user/{id}")</span></span><br><span class="line">    <span class="keyword">public</span> User <span class="title function_">FindUserById</span><span class="params">(<span class="meta">@PathVariable("id")</span> Integer id)</span>{</span><br><span class="line">        System.out.println(<span class="string">"id: "</span>+id);</span><br><span class="line">        System.out.println(<span class="string">"user..."</span>);</span><br><span class="line">        <span class="keyword">return</span> <span class="keyword">new</span> <span class="title class_">User</span>(id,<span class="string">"小李"</span>,<span class="number">23</span>,<span class="keyword">new</span> <span class="title class_">Date</span>());</span><br><span class="line">    }</span><br><span class="line"></span><br><span class="line">    <span class="comment">//queryString接口 url?id=11</span></span><br><span class="line">    <span class="meta">@GetMapping("user")</span></span><br><span class="line">    <span class="keyword">public</span> User <span class="title function_">user</span><span class="params">(<span class="meta">@RequestParam("id")</span> Integer id)</span>{</span><br><span class="line">        System.out.println(<span class="string">"id: "</span>+id);</span><br><span class="line">        System.out.println(<span class="string">"user..."</span>);</span><br><span class="line">        <span class="keyword">return</span> <span class="keyword">new</span> <span class="title class_">User</span>(id,<span class="string">"小陈"</span>,<span class="number">23</span>,<span class="keyword">new</span> <span class="title class_">Date</span>());</span><br><span class="line">    }</span><br><span class="line"></span><br><span class="line">    <span class="comment">//测试接口</span></span><br><span class="line">    <span class="meta">@GetMapping("demo")</span></span><br><span class="line"></span><br><span class="line">    <span class="keyword">public</span> String <span class="title function_">demo</span><span class="params">()</span>{</span><br><span class="line">        System.out.println(<span class="string">"demo..."</span>);</span><br><span class="line">        <span class="keyword">return</span> <span class="string">"demo ok"</span>;</span><br><span class="line">    }</span><br><span class="line">}</span><br><span class="line"></span><br></pre></td></tr></tbody></table></figure>

<p><strong>前端代码：</strong></p>
<figure class="highlight html"><table><tbody><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br></pre></td><td class="code"><pre><span class="line"><span class="meta">&lt;!DOCTYPE <span class="keyword">html</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">html</span> <span class="attr">lang</span>=<span class="string">"en"</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">head</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">meta</span> <span class="attr">charset</span>=<span class="string">"UTF-8"</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">title</span>&gt;</span>vue系列课程<span class="tag">&lt;/<span class="name">title</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">head</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">body</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">div</span> <span class="attr">id</span> = <span class="string">"app"</span>&gt;</span></span><br><span class="line">        <span class="tag">&lt;<span class="name">h1</span>&gt;</span>axios的GET方式请求<span class="tag">&lt;/<span class="name">h1</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">body</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">html</span>&gt;</span></span><br><span class="line"><span class="comment">&lt;!--引入axios异步请求核心js文件--&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">script</span> <span class="attr">src</span>=<span class="string">"js/axios.min.js"</span>&gt;</span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br><span class="line"><span class="comment">&lt;!--测试异步请求--&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">script</span>&gt;</span><span class="language-javascript"></span></span><br><span class="line"><span class="language-javascript"></span></span><br><span class="line"><span class="language-javascript">    <span class="comment">//发送axios 的GET方式请求</span></span></span><br><span class="line"><span class="language-javascript">    <span class="comment">/*axios.get("http://localhost:8989/user?id=11").then(function (res){</span></span></span><br><span class="line"><span class="comment"><span class="language-javascript">        console.log(res.data);</span></span></span><br><span class="line"><span class="comment"><span class="language-javascript">        console.log(res.data.id);</span></span></span><br><span class="line"><span class="comment"><span class="language-javascript">        console.log(res.data.name);</span></span></span><br><span class="line"><span class="comment"><span class="language-javascript">        console.log(res.data.age);</span></span></span><br><span class="line"><span class="comment"><span class="language-javascript">        console.log(res.data.bir);</span></span></span><br><span class="line"><span class="comment"><span class="language-javascript">    });*/</span></span></span><br><span class="line"><span class="language-javascript"></span></span><br><span class="line"><span class="language-javascript">    <span class="comment">//es6中简化写法function(){}简化写法java中lambada表达式   ()=&gt;</span></span></span><br><span class="line"><span class="language-javascript">    axios.<span class="title function_">get</span>(<span class="string">"http://localhost:8989/user/11"</span>).<span class="title function_">then</span>(<span class="function">(<span class="params">res</span>)=&gt;</span>{</span></span><br><span class="line"><span class="language-javascript">        <span class="variable language_">console</span>.<span class="title function_">log</span>(res.<span class="property">data</span>);</span></span><br><span class="line"><span class="language-javascript">        <span class="variable language_">console</span>.<span class="title function_">log</span>(res.<span class="property">data</span>.<span class="property">id</span>);</span></span><br><span class="line"><span class="language-javascript">        <span class="variable language_">console</span>.<span class="title function_">log</span>(res.<span class="property">data</span>.<span class="property">name</span>);</span></span><br><span class="line"><span class="language-javascript">        <span class="variable language_">console</span>.<span class="title function_">log</span>(res.<span class="property">data</span>.<span class="property">age</span>);</span></span><br><span class="line"><span class="language-javascript">        <span class="variable language_">console</span>.<span class="title function_">log</span>(res.<span class="property">data</span>.<span class="property">bir</span>);</span></span><br><span class="line"><span class="language-javascript">    });</span></span><br><span class="line"><span class="language-javascript"></span></span><br><span class="line"><span class="language-javascript"></span></span><br><span class="line"><span class="language-javascript">    <span class="comment">/*axios.get("http://localhost:8989/demo").then(function (resonse){ //then 正确请求返回处理结果</span></span></span><br><span class="line"><span class="comment"><span class="language-javascript">        console.log(resonse.data);</span></span></span><br><span class="line"><span class="comment"><span class="language-javascript">    }).catch(function (error){  //请求地址值出错的处理结果</span></span></span><br><span class="line"><span class="comment"><span class="language-javascript">        console.log(error)</span></span></span><br><span class="line"><span class="comment"><span class="language-javascript">    });   //发送异步请求方式*/</span></span></span><br><span class="line"><span class="language-javascript"></span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br></pre></td></tr></tbody></table></figure>

<h4 id="11-2-2-POST方式请求"><a href="#11-2-2-POST方式请求" class="headerlink" title="11.2.2 POST方式请求"></a>11.2.2 POST方式请求</h4><p><strong>后端代码：</strong></p>
<figure class="highlight java"><table><tbody><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">//定义post接口</span></span><br><span class="line"><span class="meta">@PostMapping("user")</span></span><br><span class="line"><span class="keyword">public</span> Map&lt;String,Object&gt; <span class="title function_">save</span><span class="params">(<span class="meta">@RequestBody</span> User user)</span>{ <span class="comment">//@RequestBody 将json格式数据转换成java对象</span></span><br><span class="line">    System.out.println(<span class="string">"user:"</span> + user);</span><br><span class="line">    HashMap&lt;String,Object&gt; result = <span class="keyword">new</span> <span class="title class_">HashMap</span>&lt;&gt;();</span><br><span class="line">    result.put(<span class="string">"success"</span>,<span class="literal">true</span>);</span><br><span class="line">    result.put(<span class="string">"msg"</span>,<span class="string">"添加成功~~"</span>);</span><br><span class="line">    <span class="keyword">return</span> result;</span><br><span class="line">}</span><br><span class="line"></span><br></pre></td></tr></tbody></table></figure>

<p><strong>前端代码：</strong> </p>
<figure class="highlight html"><table><tbody><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br></pre></td><td class="code"><pre><span class="line"><span class="meta">&lt;!DOCTYPE <span class="keyword">html</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">html</span> <span class="attr">lang</span>=<span class="string">"en"</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">head</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">meta</span> <span class="attr">charset</span>=<span class="string">"UTF-8"</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">title</span>&gt;</span>vue系列课程<span class="tag">&lt;/<span class="name">title</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">head</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">body</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">div</span> <span class="attr">id</span> = <span class="string">"app"</span>&gt;</span></span><br><span class="line">        <span class="tag">&lt;<span class="name">h1</span>&gt;</span>axios的POST方式请求<span class="tag">&lt;/<span class="name">h1</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">body</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">html</span>&gt;</span></span><br><span class="line"><span class="comment">&lt;!--引入axios异步请求核心js文件--&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">script</span> <span class="attr">src</span>=<span class="string">"js/axios.min.js"</span>&gt;</span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br><span class="line"><span class="comment">&lt;!--测试异步请求--&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">script</span>&gt;</span><span class="language-javascript"></span></span><br><span class="line"><span class="language-javascript">    <span class="comment">//发送post方式请求</span></span></span><br><span class="line"><span class="language-javascript">    <span class="comment">//参数1: url地址 参数2: 请求数据</span></span></span><br><span class="line"><span class="language-javascript">    axios.<span class="title function_">post</span>(<span class="string">"http://localhost:8989/user"</span>,{</span></span><br><span class="line"><span class="language-javascript">        <span class="attr">name</span>:<span class="string">"小李"</span>,</span></span><br><span class="line"><span class="language-javascript">        <span class="attr">age</span>:<span class="number">23</span>,</span></span><br><span class="line"><span class="language-javascript">        <span class="attr">bir</span>:<span class="string">"2012-02-05"</span></span></span><br><span class="line"><span class="language-javascript">    }).<span class="title function_">then</span>(<span class="function">(<span class="params">res</span>)=&gt;</span>{</span></span><br><span class="line"><span class="language-javascript">        <span class="variable language_">console</span>.<span class="title function_">log</span>(res.<span class="property">data</span>);</span></span><br><span class="line"><span class="language-javascript">    });</span></span><br><span class="line"><span class="language-javascript"></span></span><br><span class="line"><span class="language-javascript"></span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br></pre></td></tr></tbody></table></figure>

<h4 id="11-2-3-axios并发请求"><a href="#11-2-3-axios并发请求" class="headerlink" title="11.2.3 axios并发请求"></a>11.2.3 axios并发请求</h4><blockquote>
<p><code>并发请求</code>:  将多个请求在同一时刻发送到后端服务接口,最后在集中处理每个请求的响应结果</p>
</blockquote>
<img src="https://yichen-blog.oss-cn-beijing.aliyuncs.com//note-image/2023/07/16/20230716-135141.png" alt="image-20210713215658747" style="zoom:67%;">

<figure class="highlight js"><table><tbody><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">//axios并发请求</span></span><br><span class="line"><span class="comment">//定义demo请求</span></span><br><span class="line"><span class="keyword">function</span> <span class="title function_">demo</span>(<span class="params"></span>){</span><br><span class="line">    <span class="keyword">return</span> axios.<span class="title function_">get</span>(<span class="string">"http://localhost:8989/demo"</span>);</span><br><span class="line">}</span><br><span class="line"><span class="comment">//定义user请求</span></span><br><span class="line"><span class="keyword">function</span> <span class="title function_">user</span>(<span class="params"></span>){</span><br><span class="line">    <span class="keyword">return</span> axios.<span class="title function_">get</span>(<span class="string">"http://localhost:8989/user?id=11"</span>);</span><br><span class="line">}</span><br><span class="line">axios.<span class="title function_">all</span>([<span class="title function_">demo</span>(), <span class="title function_">user</span>()]).<span class="title function_">then</span>(axios.<span class="title function_">spread</span>(<span class="function">(<span class="params">demoRes,useRes</span>)=&gt;</span>{ <span class="comment">//并发请求</span></span><br><span class="line">    <span class="variable language_">console</span>.<span class="title function_">log</span>(demoRes);</span><br><span class="line">    <span class="variable language_">console</span>.<span class="title function_">log</span>(useRes);</span><br><span class="line">})); </span><br></pre></td></tr></tbody></table></figure>

<h4 id="11-2-4-拦截器"><a href="#11-2-4-拦截器" class="headerlink" title="11.2.4 拦截器"></a>11.2.4 拦截器</h4><p><img src="https://yichen-blog.oss-cn-beijing.aliyuncs.com//note-image/2023/07/16/20230716-135205.png" alt="6.axios中拦截器的基本使用"></p>
<h2 id="12、Vue-生命周期"><a href="#12、Vue-生命周期" class="headerlink" title="12、Vue 生命周期"></a>12、Vue 生命周期</h2><blockquote>
<p> Vue 实例生命周期 ===&gt; java 对象生命周期(初始化阶段 运行阶段  销毁阶段)    <code>生命周期钩子</code>   ====&gt;  <code>生命周期函数</code> </p>
<p> Vue实例从创建到销毁过程中自动触发一系列函数   ====&gt; Vue生命周期函数(钩子)</p>
</blockquote>
<p><img src="https://yichen-blog.oss-cn-beijing.aliyuncs.com//note-image/2023/07/16/20230716-135232.png" alt="lifecycle-生命周期(图示版)"></p>
<p><strong>Vue生命周期总结</strong> </p>
<figure class="highlight markdown"><table><tbody><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br></pre></td><td class="code"><pre><span class="line"><span class="section"># </span></span><br><span class="line"><span class="bullet">-</span> 1.初始化阶段</span><br><span class="line"><span class="code">        beforeCreate(){ //1.生命周期中第一个函数,该函数在执行时Vue实例仅仅完成了自身事件的绑定和生命周期函数的初始化工作,Vue实例中还没有 Data el methods相关属性</span></span><br><span class="line"><span class="code">        console.log("beforeCreate: "+this.msg);</span></span><br><span class="line"><span class="code">        },</span></span><br><span class="line"><span class="code">        created(){ //2.生命周期中第二个函数,该函数在执行时Vue实例已经初始化了data属性和methods中相关方法</span></span><br><span class="line"><span class="code">        console.log("created: "+this.msg);</span></span><br><span class="line"><span class="code">        },</span></span><br><span class="line"><span class="code">        beforeMount(){//3.生命周期中第三个函数,该函数在执行时Vue将El中指定作用范围作为模板编译</span></span><br><span class="line"><span class="code">        console.log("beforeMount: "+document.getElementById("sp").innerText);</span></span><br><span class="line"><span class="code">        },</span></span><br><span class="line"><span class="code">        mounted(){//4.生命周期中第四个函数,该函数在执行过程中,已经将数据渲染到界面中并且已经更新页面</span></span><br><span class="line"><span class="code">        console.log("Mounted: "+document.getElementById("sp").innerText);</span></span><br><span class="line"><span class="code">        }</span></span><br><span class="line"><span class="code"></span></span><br><span class="line"><span class="bullet">-</span> 2.运行阶段</span><br><span class="line"><span class="code">        beforeUpdate(){//5.生命周期中第五个函数,该函数是data中数据发生变化时执行 这个事件执行时仅仅是Vue实例中data数据变化页面显示的依然是原始数据</span></span><br><span class="line"><span class="code">        console.log("beforeUpdate:"+this.msg);</span></span><br><span class="line"><span class="code">        console.log("beforeUpdate:"+document.getElementById("sp").innerText);</span></span><br><span class="line"><span class="code">        },</span></span><br><span class="line"><span class="code">        updated(){    //6.生命周期中第六个函数,该函数执行时data中数据发生变化,页面中数据也发生了变化  页面中数据已经和data中数据一致</span></span><br><span class="line"><span class="code">        console.log("updated:"+this.msg);</span></span><br><span class="line"><span class="code">        console.log("updated:"+document.getElementById("sp").innerText);</span></span><br><span class="line"><span class="code">        },</span></span><br><span class="line"><span class="code"></span></span><br><span class="line"><span class="bullet">-</span> 3.销毁阶段</span><br><span class="line"><span class="code">        beforeDestory(){//7.生命周期第七个函数,该函数执行时,Vue中所有数据 methods componet 都没销毁</span></span><br><span class="line"><span class="code">        },</span></span><br><span class="line"><span class="code">        destoryed(){ //8.生命周期的第八个函数,该函数执行时,Vue实例彻底销毁</span></span><br><span class="line"><span class="code">        }</span></span><br><span class="line"><span class="code">        </span></span><br></pre></td></tr></tbody></table></figure>

<hr>
<p><strong>代码：</strong></p>
<figure class="highlight plaintext"><table><tbody><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br><span class="line">58</span><br><span class="line">59</span><br><span class="line">60</span><br><span class="line">61</span><br><span class="line">62</span><br><span class="line">63</span><br><span class="line">64</span><br><span class="line">65</span><br><span class="line">66</span><br><span class="line">67</span><br><span class="line">68</span><br><span class="line">69</span><br><span class="line">70</span><br><span class="line">71</span><br><span class="line">72</span><br><span class="line">73</span><br><span class="line">74</span><br><span class="line">75</span><br><span class="line">76</span><br><span class="line">77</span><br><span class="line">78</span><br><span class="line">79</span><br><span class="line">80</span><br><span class="line">81</span><br><span class="line">82</span><br><span class="line">83</span><br><span class="line">84</span><br></pre></td><td class="code"><pre><span class="line">&lt;!DOCTYPE html&gt;</span><br><span class="line">&lt;html lang="en"&gt;</span><br><span class="line">&lt;head&gt;</span><br><span class="line">    &lt;meta charset="UTF-8"&gt;</span><br><span class="line">    &lt;title&gt;vue系列课程&lt;/title&gt;</span><br><span class="line">&lt;/head&gt;</span><br><span class="line">&lt;body&gt;</span><br><span class="line">    &lt;div id = "app"&gt;</span><br><span class="line">        &lt;h1 id="sp"&gt;{{msg}}&lt;/h1&gt;</span><br><span class="line"></span><br><span class="line">        &lt;input type="button" value="修改数据" @click="changeData"&gt;</span><br><span class="line">        &lt;!--</span><br><span class="line">            vue生命周期分为三个阶段：</span><br><span class="line">                1.初始化阶段</span><br><span class="line">                     beforeCreate(){ //1.生命周期中第一个函数,该函数在执行时Vue实例仅仅完成了自身事件的绑定和生命周期函数的初始化工作,Vue实例中还没有 Data el methods相关属性</span><br><span class="line">                        console.log("beforeCreate: "+this.msg);</span><br><span class="line">                    },</span><br><span class="line">                    created(){   //2.生命周期中第二个函数,该函数在执行时Vue实例已经初始化了data属性和methods中相关方法</span><br><span class="line">                        console.log("created: "+this.msg);</span><br><span class="line">                    },</span><br><span class="line">                    beforeMount(){//3.生命周期中第三个函数,该函数在执行时Vue将El中指定作用范围作为模板编译</span><br><span class="line">                        console.log("beforeMount: "+document.getElementById("sp").innerText);</span><br><span class="line">                    },</span><br><span class="line">                    mounted(){    //4.生命周期中第四个函数,该函数在执行过程中,已经将数据渲染到界面中并且已经更新页面</span><br><span class="line">                        console.log("Mounted: "+document.getElementById("sp").innerText);</span><br><span class="line">                    }</span><br><span class="line">                2.运行阶段</span><br><span class="line">                    beforeUpdate(){//5.生命周期中第五个函数,该函数是data中数据发生变化时执行 这个事件执行时仅仅是Vue实例中data数据变化页面显示的依然是原始数据</span><br><span class="line">                        console.log("beforeUpdate:"+this.msg);</span><br><span class="line">                        console.log("beforeUpdate:"+document.getElementById("sp").innerText);</span><br><span class="line">                    },</span><br><span class="line">                    updated(){    //6.生命周期中第六个函数,该函数执行时data中数据发生变化,页面中数据也发生了变化  页面中数据已经和data中数据一致</span><br><span class="line">                        console.log("updated:"+this.msg);</span><br><span class="line">                        console.log("updated:"+document.getElementById("sp").innerText);</span><br><span class="line">                    },</span><br><span class="line">                3.销毁阶段</span><br><span class="line">                    beforeDestory(){//7.生命周期第七个函数,该函数执行时,Vue中所有数据 methods componet 都没销毁</span><br><span class="line">                        },</span><br><span class="line">                    destoryed(){ //8.生命周期的第八个函数,该函数执行时,Vue实例彻底销毁</span><br><span class="line">                    }</span><br><span class="line">        --&gt;</span><br><span class="line">    &lt;/div&gt;</span><br><span class="line">&lt;/body&gt;</span><br><span class="line">&lt;/html&gt;</span><br><span class="line">&lt;script src="js/vue.js"&gt;&lt;/script&gt;</span><br><span class="line">&lt;script&gt;</span><br><span class="line">    var app = new Vue({</span><br><span class="line">        el: "#app",</span><br><span class="line">        data:{</span><br><span class="line">            msg:"vue 生命周期",</span><br><span class="line">        },</span><br><span class="line">        methods:{</span><br><span class="line">            changeData(){</span><br><span class="line">                this.msg="vue 生命周期讲解";</span><br><span class="line">            }</span><br><span class="line">        },</span><br><span class="line">        computed:{},</span><br><span class="line"></span><br><span class="line">        beforeCreate(){ //1.生命周期中第一个函数,该函数在执行时Vue实例仅仅完成了自身事件的绑定和生命周期函数的初始化工作,Vue实例中还没有 Data el methods相关属性</span><br><span class="line">            console.log("beforeCreate: "+this.msg);</span><br><span class="line">        },</span><br><span class="line">        created(){   //2.生命周期中第二个函数,该函数在执行时Vue实例已经初始化了data属性和methods中相关方法</span><br><span class="line">            console.log("created: "+this.msg);</span><br><span class="line">        },</span><br><span class="line">        beforeMount(){//3.生命周期中第三个函数,该函数在执行时Vue将El中指定作用范围作为模板编译</span><br><span class="line">            console.log("beforeMount: "+document.getElementById("sp").innerText);</span><br><span class="line">        },</span><br><span class="line">        mounted(){    //4.生命周期中第四个函数,该函数在执行过程中,已经将数据渲染到界面中并且已经更新页面</span><br><span class="line">            console.log("Mounted: "+document.getElementById("sp").innerText);</span><br><span class="line">        },</span><br><span class="line">        beforeUpdate(){//5.生命周期中第五个函数,该函数是data中数据发生变化时执行 这个事件执行时仅仅是Vue实例中data数据变化页面显示的依然是原始数据</span><br><span class="line">            console.log("beforeUpdate:"+this.msg);</span><br><span class="line">            console.log("beforeUpdate:"+document.getElementById("sp").innerText);</span><br><span class="line">        },</span><br><span class="line">        updated(){    //6.生命周期中第六个函数,该函数执行时data中数据发生变化,页面中数据也发生了变化  页面中数据已经和data中数据一致</span><br><span class="line">            console.log("updated:"+this.msg);</span><br><span class="line">            console.log("updated:"+document.getElementById("sp").innerText);</span><br><span class="line">        },</span><br><span class="line">        beforeDestory(){//7.生命周期第七个函数,该函数执行时,Vue中所有数据 methods componet 都没销毁</span><br><span class="line">        },</span><br><span class="line">        destoryed(){ //8.生命周期的第八个函数,该函数执行时,Vue实例彻底销毁</span><br><span class="line">        }</span><br><span class="line">    });</span><br><span class="line">&lt;/script&gt;</span><br></pre></td></tr></tbody></table></figure>




      
    </div>
    <div class="article-footer">
      <blockquote class="mt-2x">
  <ul class="post-copyright list-unstyled">
    
    <li class="post-copyright-link hidden-xs">
      <strong>本文链接：</strong>
      <a href="https://yichenfirst.github.io/2021/07/30/%E5%89%8D%E7%AB%AF/vue%E7%AC%94%E8%AE%B0/" title="vue笔记" target="_blank" rel="external">https://yichenfirst.github.io/2021/07/30/前端/vue笔记/</a>
    </li>
    
    <li class="post-copyright-license">
      <strong>版权声明： </strong> 本博客所有文章除特别声明外，均采用 <a href="http://creativecommons.org/licenses/by/4.0/deed.zh" target="_blank" rel="external">CC BY 4.0 CN协议</a> 许可协议。转载请注明出处！
    </li>
  </ul>
</blockquote>


<div class="panel panel-default panel-badger">
  <div class="panel-body">
    <figure class="media">
      <div class="media-left">
        <a href="" target="_blank" class="img-burn thumb-sm visible-lg">
          <img src="/images/avatar.jpg" class="img-rounded w-full" alt="">
        </a>
      </div>
      <div class="media-body">
        <h3 class="media-heading"><a href="" target="_blank"><span class="text-dark">逸辰</span><small class="ml-1x">后端开发</small></a></h3>
        <div>个人简介。</div>
      </div>
    </figure>
  </div>
</div>


    </div>
  </article>
  
    
  <section id="comments">
  	
      <div id="vcomments"></div>
    
  </section>


  
</div>

  <nav class="bar bar-footer clearfix" data-stick-bottom>
  <div class="bar-inner">
  
  <ul class="pager pull-left">
    
    <li class="prev">
      <a href="/2021/08/01/%E5%89%8D%E7%AB%AF/vue%E8%84%9A%E6%89%8B%E6%9E%B6%E4%B8%8Evuex/" title="vue脚手架与vuex"><i class="icon icon-angle-left" aria-hidden="true"></i><span>&nbsp;&nbsp;上一篇</span></a>
    </li>
    
    
    <li class="next">
      <a href="/2021/06/08/%E5%89%8D%E7%AB%AF/JavaScript/" title="JavaScript"><span>下一篇&nbsp;&nbsp;</span><i class="icon icon-angle-right" aria-hidden="true"></i></a>
    </li>
    
    
  </ul>
  
  
  <!-- Button trigger modal -->
  <button type="button" class="btn btn-fancy btn-donate pop-onhover bg-gradient-warning" data-toggle="modal" data-target="#donateModal"><span>赏</span></button>
  <!-- <div class="wave-icon wave-icon-danger btn-donate" data-toggle="modal" data-target="#donateModal">
    <div class="wave-circle"><span class="icon"><i class="icon icon-bill"></i></span></div>
  </div> -->
  
  
  <div class="bar-right">
    
  </div>
  </div>
</nav>
  
<!-- Modal -->
<div class="modal modal-center modal-small modal-xs-full fade" id="donateModal" tabindex="-1" role="dialog">
  <div class="modal-dialog" role="document">
    <div class="modal-content donate">
      <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
      <div class="modal-body">
        <div class="donate-box">
          <div class="donate-head">
            <p>感谢您的支持，我会继续努力的!</p>
          </div>
          <div class="tab-content">
            <div role="tabpanel" class="tab-pane fade active in" id="alipay">
              <div class="donate-payimg">
                <img src="/images/donate/alipayimg.png" alt="扫码支持" title="扫一扫" />
              </div>
              <p class="text-muted mv">扫码打赏，你说多少就多少</p>
              <p class="text-grey">打开支付宝扫一扫，即可进行扫码打赏哦</p>
            </div>
            <div role="tabpanel" class="tab-pane fade" id="wechatpay">
              <div class="donate-payimg">
                <img src="/images/donate/wechatpayimg.png" alt="扫码支持" title="扫一扫" />
              </div>
              <p class="text-muted mv">扫码打赏，你说多少就多少</p>
              <p class="text-grey">打开微信扫一扫，即可进行扫码打赏哦</p>
            </div>
          </div>
          <div class="donate-footer">
            <ul class="nav nav-tabs nav-justified" role="tablist">
              <li role="presentation" class="active">
                <a href="#alipay" id="alipay-tab" role="tab" data-toggle="tab" aria-controls="alipay" aria-expanded="true"><i class="icon icon-alipay"></i> 支付宝</a>
              </li>
              <li role="presentation" class="">
                <a href="#wechatpay" role="tab" id="wechatpay-tab" data-toggle="tab" aria-controls="wechatpay" aria-expanded="false"><i class="icon icon-wepay"></i> 微信支付</a>
              </li>
            </ul>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>



</main>

  <footer class="footer" itemscope itemtype="http://schema.org/WPFooter">
	
    <div class="copyright">
    	
        &copy; 2023 逸辰
        
        <div class="publishby">
        	Theme by <a href="https://github.com/cofess" target="_blank"> cofess </a>base on <a href="https://github.com/cofess/hexo-theme-pure" target="_blank">pure</a>.
        </div>
    </div>
</footer>
  <script src="//cdn.jsdelivr.net/npm/jquery@1.12.4/dist/jquery.min.js"></script>
<script>
window.jQuery || document.write('<script src="js/jquery.min.js"><\/script>')
</script>

<script src="/js/plugin.min.js"></script>


<script src="/js/application.js"></script>


    <script>
(function (window) {
    var INSIGHT_CONFIG = {
        TRANSLATION: {
            POSTS: '文章',
            PAGES: '页面',
            CATEGORIES: '分类',
            TAGS: '标签',
            UNTITLED: '(未命名)',
        },
        ROOT_URL: '/',
        CONTENT_URL: '/content.json',
    };
    window.INSIGHT_CONFIG = INSIGHT_CONFIG;
})(window);
</script>

<script src="/js/insight.js"></script>






   
<script async src="//busuanzi.ibruce.info/busuanzi/2.3/busuanzi.pure.mini.js"></script>





   
    
  <script src="//cdn1.lncld.net/static/js/3.0.4/av-min.js"></script>
  <script src="//cdn.jsdelivr.net/npm/valine"></script>
  <script type="text/javascript">
  var GUEST = ['nick', 'mail', 'link'];
  var meta = 'nick,mail,link';
  meta = meta.split(',').filter(function(item) {
    return GUEST.indexOf(item) > -1;
  });
  new Valine({
    el: '#vcomments',
    verify: false,
    notify: false,
    appId: '',
    appKey: '',
    placeholder: 'Just go go',
    avatar: 'mm',
    meta: meta,
    pageSize: '10' || 10,
    visitor: false
  });
  </script>

     







</body>
</html>